@use "../utils/animations" as *;
@use "../utils/responsive" as *;

.agency-banner {
  margin: 10rem var(--wr-large);
  @include bg;

  &__caption {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4rem;
    padding: 20rem 0;

    &>p {
      color: var(--clr-beige-200);
      max-width: 38rem;
      text-align: center;
    }

    @include at-max("xl") {
      padding: 17rem 0;
    }

    @include at-max("lg") {
      gap: 3rem;
      padding: 14rem 0;
    }

    @include at-max("md") {
      gap: 2rem;
      padding: 10rem 0;
    }

    @include at-max("sm") {
      padding: 8rem 0;
    }

    @include at-max("xs") {
      padding: 6rem 0;
    }
  }

  @include at-max("lg") {
    margin: 8rem var(--wr-large);
  }

  @include at-max("md") {
    margin: 6rem var(--wr-large);
  }

  @include at-max("sm") {
    margin: 4rem var(--wr-large);
  }
}

.agency-presentation {
  padding: 10rem var(--wr-medium) 16rem;

  &>h2 {
    margin-bottom: 6rem;

    @include at-max("lg") {
      margin-bottom: 4rem;
    }

    @include at-max("md") {
      margin-bottom: 3rem;
    }

    @include at-max("sm") {
      margin-bottom: 2rem;
    }
  }

  &>.block-media {
    padding: 0;

    &:not(:last-child) {
      margin-bottom: 10rem;

      @include at-max("lg") {
        margin-bottom: 8rem;
      }

      @include at-max("md") {
        margin-bottom: 6rem;
      }

      @include at-max("sm") {
        margin-bottom: 4rem;
      }
    }
  }

  @include at-max("lg") {
    padding: 8rem var(--wr-large);
  }

  @include at-max("md") {
    padding: 6rem var(--wr-large);
  }

  @include at-max("sm") {
    padding: 4rem var(--wr-large);
  }
}