.image-and-text {
  max-width: 90rem;
  margin: 0 auto;

  .image-and-text__content {
    padding: 0 2.8125rem;

    @media (width > 760px) {
      padding: 0;
    }
  }

  @media (width > 760px) {
    display: grid;
    grid-auto-columns: 52.5% 33.88%;
    grid-auto-flow: column;
    gap: 2.5rem;
  }

  @media (width > 1320px) {
    gap: 5rem;
    align-items: center;
  }
}

.image-and-text.Right {
  @media (width > 760px) {
    grid-auto-columns: 33.88% 52.5%;
    justify-content: end;
  }

  .image-and-text__image {
    @media (width > 760px) {
      order: 2;
    }
  }

  .image-and-text__content {
    @media (width > 760px) {
      order: 1;
    }
  }
}

.image-and-text.Top {
  grid-auto-columns: 1fr 1fr;

  @media (width > 760px) {
    grid-auto-flow: row;
    max-width: 65rem;
    gap: 0;
  }
}

.image-and-text.Bottom {
  grid-auto-columns: 1fr 1fr;
  display: grid;
  grid-auto-flow: row;
  max-width: 65rem;
  gap: 0;

  .image-and-text__image {
    order: 2;
    margin-bottom: 0;
    margin-top: 2rem;
  }

  .image-and-text__content {
    order: 1;
  }
}

.image-and-text.Top,
.image-and-text.Bottom {
  .image-and-text__content {
    padding: 0 2.8125rem;
  }
}

.image-and-text__image {
  border-radius: 2rem;
  margin-bottom: 2rem;
  overflow: hidden;
  aspect-ratio: 756 / 572;
  position: relative;

  img {
    aspect-ratio: 756 / 572;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.image-and-text__image.On {
  background-color: #ffffff;

  img {
    object-fit: contain;
  }
}

.image-and-text__content h2,
.image-and-text__content h3,
.image-and-text__content h4,
.image-and-text__content h5,
.image-and-text__content h6 {
  font-size: var(--heading-sm-font-size);
  margin-bottom: var(--heading-sm-paragraph-spacing);
  line-height: var(--heading-sm-line-height);
  letter-spacing: var(--heading-sm-letter-spacing);

  @media (width > 1024px) {
    font-size: var(--heading-md-font-size);
    margin-bottom: var(--heading-md-paragraph-spacing);
    line-height: var(--heading-md-line-height);
    letter-spacing: var(--heading-md-letter-spacing);
  }
}

.image-and-text__content,
.image-and-text__content p {
  font-size: 1.125rem;
  line-height: 1.4;

  @media (width > 1024px) {
    font-size: 1.5rem;
  }
}

.image-and-text__content.Center,
.image-and-text__content.Center p {
  text-align: center;

  @media (width > 1320px) {
    font-size: 1.5rem;
    line-height: 1.5;
  }
}

.image_and_text__layout-2 {
  .image-and-text__image {
    order: 2;
  }
}