/*
 * Marketing UI Image text
 * Webflow: section-image-text + grid-2-col
 * Variant: data-image-position="left" | "right"
 *   left  = Webflow base (image cell first) on desktop
 *   right = Webflow w-variant-9c888250-… (image cell order 9999) on desktop
 *   ≤991px both stack content then media, so consecutive sections read
 *   text, photo, text, photo
 *
 * Not a Figma component set. .is-black is not part of this component.
 * Hover, focus, shadow, animation: not defined.
 *
 * Local values (no matching token in tokens.css):
 *   --mkt-image-text-radius: 32px          Webflow .text-image-section_image 2rem
 *   --mkt-image-text-padding-block: 96px   Webflow .padding-huge 6rem
 *   --mkt-image-text-padding-inline: 48px  Webflow .padding-large 3rem
 *   991px: 80px / 40px                     Webflow 5rem / 2.5rem
 *   767px: 56px / 24px                     Webflow 3.5rem / 1.5rem
 * Breakpoints 991 / 767 are Webflow values, not Figma tokens.
 * 479px does not reorder the columns.
 */

.mkt-image-text {
  --mkt-image-text-radius: 32px;
  --mkt-image-text-padding-block: 96px;
  --mkt-image-text-padding-inline: 48px;

  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "media content";
  gap: var(--space-32);
  align-items: center;
  width: 100%;
  margin: 0;
  padding-block: var(--mkt-image-text-padding-block);
  padding-inline: var(--mkt-image-text-padding-inline);
  background-color: var(--color-standard-white);
}

.mkt-image-text[data-image-position="right"] {
  grid-template-areas: "content media";
}

.mkt-image-text__media {
  grid-area: media;
  min-width: 0;
  width: 100%;
}

.mkt-image-text__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--mkt-image-text-radius);
}

.mkt-image-text__content {
  grid-area: content;
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
}

.mkt-image-text__label,
.mkt-image-text__title,
.mkt-image-text__body {
  margin: 0;
}

.mkt-image-text__label {
  font-family: var(--font-family-lexend);
  font-size: var(--text-body-xsmall-size);
  line-height: var(--text-body-xsmall-line-height-regular);
  letter-spacing: var(--text-body-xsmall-letter-spacing);
  font-weight: var(--font-weight-regular);
  color: var(--color-pink-500);
  text-transform: uppercase;
}

.mkt-image-text__title {
  font-family: var(--font-family-lexend);
  font-size: var(--text-title-small-size);
  line-height: var(--text-title-small-line-height);
  letter-spacing: var(--text-title-small-letter-spacing);
  font-weight: var(--font-weight-regular);
  color: var(--color-pink-800);
}

.mkt-image-text__body {
  font-family: var(--font-family-lexend);
  font-size: var(--text-body-medium-size);
  line-height: var(--text-body-medium-line-height);
  letter-spacing: var(--text-body-medium-letter-spacing);
  font-weight: var(--font-weight-regular);
  color: var(--color-gray-800);
}

@media (max-width: 991px) {
  .mkt-image-text,
  .mkt-image-text[data-image-position="left"],
  .mkt-image-text[data-image-position="right"] {
    --mkt-image-text-padding-block: 80px;
    --mkt-image-text-padding-inline: 40px;
    grid-template-columns: 1fr;
    grid-template-areas:
      "content"
      "media";
  }
}

@media (max-width: 767px) {
  .mkt-image-text {
    --mkt-image-text-padding-block: 56px;
    --mkt-image-text-padding-inline: 24px;
  }
}