@use "../../mixins" as *;
@use "../../variables" as *;

.sponsors {
  text-align: center !important;
  margin-bottom: 50px;
  @include responsive(lg) {
    margin: 100px 0;
  }
  &__title {
    text-align: left !important;
  }

  &__sub-title {
    text-align: left !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    @include responsive(lg) {
      font-size: 18px !important;
    }
  }

  &__marquee {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center !important;
    justify-content: start !important;

    @include responsive(md) {
      justify-content: space-between !important;
    }
    gap: 2.5rem;
    width: 100%;
  }

  &__layout {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: space-between !important;

    column-gap: 2rem;

    row-gap: 7rem;
  }

  &__logo {
    max-height: 40px !important;

    @include responsive(md) {
      max-height: 70px !important;
    }
    width: auto;
    object-fit: contain;
    transition:
      transform 0.3s ease,
      opacity 0.3s ease;
    &:hover {
      transform: scale(1.05);
      opacity: 1;
    }
  }
}