.alt-imgtext { background: var(--alt-it-bg); }

.alt-imgtext__inner {
  display: flex;
  align-items: var(--alt-it-valign);
  gap: var(--alt-it-gap);
}

.alt-imgtext__inner--media-right { flex-direction: row-reverse; }

.alt-imgtext__media-col {
  position: relative;
  flex: 0 0 var(--alt-it-media-w);
  max-width: var(--alt-it-media-w);
}

.alt-imgtext__media { aspect-ratio: var(--alt-it-ratio); }
.alt-imgtext__media[style*="auto"] { aspect-ratio: auto; }

.alt-imgtext__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A second image, offset over the first, matching the layered treatment on the
   reference design. */
.alt-imgtext__media--layer {
  position: absolute;
  right: -6%;
  bottom: -8%;
  width: 42%;
  aspect-ratio: 1/1;
  border: 6px solid var(--alt-it-bg);
}

.alt-imgtext__content-col {
  flex: 1 1 auto;
  min-width: 0;
}

.alt-imgtext__content { text-align: var(--alt-it-align); }

.alt-imgtext__eyebrow { margin-bottom: 12px; }

.alt-imgtext__heading {
  margin: 0 0 18px;
  color: var(--alt-it-heading);
  font-family: var(--alt-font-heading);
  font-size: var(--alt-it-heading-size-d);
  font-weight: var(--alt-fw-heading);
  line-height: var(--alt-lh-h2);
  letter-spacing: var(--alt-heading-tracking);
}

.alt-imgtext__text {
  color: var(--alt-it-text);
  font-size: var(--alt-it-text-size);
  line-height: 1.75;
}

.alt-imgtext__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 26px;
  justify-content: var(--alt-it-align);
}

@media (max-width: 1279px) {
  .alt-imgtext__inner { gap: calc(var(--alt-it-gap) * 0.7); }
}

@media (max-width: 767px) {
  .alt-imgtext__inner,
  .alt-imgtext__inner--media-right {
    flex-direction: column;
    gap: 28px;
  }
  .alt-imgtext__inner--media-first-mobile { flex-direction: column; }
  .alt-imgtext__inner:not(.alt-imgtext__inner--media-first-mobile) { flex-direction: column-reverse; }

  .alt-imgtext__media-col {
    flex: 1 1 auto;
    max-width: 100%;
    width: 100%;
  }
  .alt-imgtext__heading { font-size: var(--alt-it-heading-size-m); }
  .alt-imgtext__media--layer { right: 0; bottom: -6%; width: 38%; border-width: 4px; }
}
