.image-columns__container {
  display: grid;
  gap: 4rem;
  grid-template-columns: 63rem 32.5rem 1fr;

  .image-columns__image {
    order: 1;

    .image-columns__image-inner {
      border-radius: 3rem;
      overflow: hidden;

      img {
        height: auto;
        width: 100%;
      }
    }
  }

  .image-columns__illustration {
    order: 3;
  }

  &:not(.image-columns__container-revers) .image-columns__illustration {
    justify-self: end;
  }

  .image-columns__content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    order: 2;

    .text.text--title {
      font-size: var(--title-size);
      line-height: 1.3;
    }

    .text--normal {
      font-size: var(--content-size);
      line-height: 1.3;
    }

    .button__block-wrapper {
      padding-top: 2em;

      .button--outlined {
        --PX: 1.3em;
        --PY: 0.66em;
        font-weight: 600;
      }
    }
  }

  &:not(:has(.image-columns__illustration)) {
    justify-content: center;
    grid-template-columns: 63rem 32.5rem;

    &.image-columns__container-revers {
      grid-template-columns: 32.5rem 63rem;
    }
  }

  &.image-columns__container-revers {
    grid-template-columns: 1fr 32.5rem 63rem;

    .image-columns__image {
      order: 3;
    }

    .image-columns__illustration {
      order: 1;
    }

    .image-columns__content {
      order: 2;
    }
  }

  .image-columns__align-center {
    align-self: center;
  }

  .image-columns__align-end {
    align-self: end;
  }

  @media screen and (width <=1024px) {
    &:not(.image-columns__container-revers) .image-columns__illustration {
      justify-self: start;
    }

    &,
    &.image-columns__container-revers,
    &:not(:has(.image-columns__illustration)),
    &:not(:has(.image-columns__illustration)).image-columns__container-revers {
      grid-template-columns: 100%;

      .image-columns__image {
        order: 1;
      }

      .image-columns__illustration {
        order: 2;
      }

      .image-columns__content {
        order: 3;
      }
    }
  }
}