main {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* Homepage feature overrides: keep flex layout but constrain image
   to a fixed width so text sits to the left/right. Placed here
   because main.css is always linked in the generated site. */
.feature[data-style=home] {
  justify-content: flex-start !important;
  align-items: center !important;
}

.feature[data-style=home] .feature-image {
  display: block !important;
  /* match the clamp-based sizing from feature.scss but keep the rule
    important to override cached/strong selectors */
  flex: 0 0 clamp(160px, 35vw, 450px) !important;
  width: clamp(160px, 35vw, 450px) !important;
  max-width: 450px !important;
  margin-right: 20px !important;
  box-sizing: border-box !important;
}

.feature[data-style=home] .feature-image img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Strong explicit layout: ensure text flexes and image stays fixed */
.feature[data-style=home] {
  display: flex !important;
  align-items: center !important;
}

.feature[data-style=home] .feature-image {
  flex: 0 0 clamp(160px, 35vw, 450px) !important;
  width: clamp(160px, 35vw, 450px) !important;
  max-width: 450px !important;
}

.feature[data-style=home] .feature-text {
  flex: 1 1 auto !important;
  min-width: 0 !important; /* allow flex children to shrink */
}

.feature[data-style=home] .feature-text > * {
  margin: 0 !important;
}

/* Small screens: stacked layout should ignore stagger flipping and
   ensure margins collapse appropriately. */
@media (max-width: 800px) {
  .feature[data-style=home]:nth-of-type(2n) {
    flex-direction: column !important;
  }
  .feature[data-style=home] .feature-image {
    /* use logical margins so spacing adapts for RTL and future layout flips */
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
    width: 100% !important;
    flex: 0 0 auto !important;
    max-width: none !important;
  }
}
.feature[data-style=home] {
  /* desktop-stagger: remove the default per-component gap so the
     image/text spacing is driven only by the explicit image margins
     below. This prevents combined gap+margin from shifting elements. */
  gap: 0 !important;
}

.feature[data-style=home] .feature-image {
  /* default: give the image spacing on the inline end (right in LTR) */
  margin-inline-end: 20px !important;
  margin-inline-start: 0 !important;
}

.feature[data-style=home]:nth-of-type(2n) {
  /* Explicitly reverse the row so the text appears to the left and
     the image to the right. This is a deterministic override that
     is robust across browsers and avoids relying only on `order`. */
  flex-direction: row-reverse !important;
}

.feature[data-style=home]:nth-of-type(2n) .feature-image {
  /* mirrored margins for flipped layout (use logical properties) */
  margin-inline-start: 20px !important;
  margin-inline-end: 0 !important;
}

/* Removed per-child `order` overrides: use `flex-direction: row-reverse`
   on even features to flip layout deterministically. */
/* Final small-screen safeguard: ensure any later row-reverse rules do not
   prevent stacked mobile layout. This sits near the end so it wins the
   cascade when the viewport is narrow. */
@media (max-width: 800px) {
  .feature[data-style=home],
  .feature[data-style=home]:nth-of-type(2n) {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .feature[data-style=home] .feature-image {
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
    width: 100% !important;
    flex: 0 0 auto !important;
    max-width: none !important;
  }
}
/* Final cleanup: ensure any leftover debug outlines/box-shadows are removed.
   This sits at the end and uses !important to override earlier debug rules. */
.feature[data-style=home],
.feature[data-style=home] * {
  outline: none !important;
  box-shadow: none !important;
}

/*# sourceMappingURL=main.css.map */