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

.block-media {
  display: grid;
  grid-template-columns: 50% 1fr;
  gap: 12rem;
  align-items: center;
  padding: 12rem var(--wr-small);

  &__left {
    position: relative;
    z-index: 0;
    height: 53.5rem;
    width: 100%;

    @include at-max("lg") {
      height: 50rem;
    }

    @include at-max("md") {
      height: 46rem;
    }

    @include at-max("sm") {
      height: 30rem;
    }

    @include at-max("xs") {
      height: 26rem;
    }
  }

  &__deco {
    position: absolute;
    z-index: -1;
    top: -6rem;
    left: -8rem;
    width: 30rem;
    height: 38.5rem;

    @include at-max("lg") {
      display: none;
    }
  }

  &__img {
    height: 100%;
    width: 100%;
    object-fit: cover;

    @include at-max("sm") {
      height: auto;
      object-position: top;
    }
  }

  &__right {
    &>.subtitle {
      margin-top: 1rem;

      @include at-max("sm") {
        margin-top: 0.6rem;
      }
    }

    &>.content {
      margin-top: 2rem;

      @include at-max("sm") {
        margin-top: 1rem;
      }
    }
  }

  &--reverse {
    grid-template-columns: 1fr 50%;

    .block-media__left {
      order: 1;

      @include at-max("sm") {
        order: 2;
      }
    }

    @include at-max("sm") {
      grid-template-columns: 1fr;

      .block-media__right {
        order: 2;
      }
    }
  }

  @include at-max("xl") {
    gap: 8rem;
  }

  @include at-max("lg") {
    padding: 10rem var(--wr-small);
    gap: 6rem;
  }

  @include at-max("md") {
    gap: 4rem;
    padding: 8rem var(--wr-small);
  }

  @include at-max("sm") {
    gap: 3rem;
    grid-template-columns: 1fr;
    padding: 6rem var(--wr-small);
  }

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