/* Shared FeatureCard: text and a clipped interface image, Figma 2026-10-26. */
.feature-card-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.feature-card {
  padding: var(--space-32) var(--space-32) 0;
  border: .549px solid var(--rule);
  border-radius: var(--radius-20);
  overflow: hidden;
  container-type: inline-size;
}

.feature-card--teal {
  background: var(--category-teal-background-muted);
}

.feature-card--violet {
  background: var(--category-violet-background-muted);
}

.feature-card--sand {
  background: var(--category-sand-background-muted);
}

.feature-card--muted {
  background: var(--background-muted);
}

.feature-card--blue {
  background: var(--category-blue-background-muted);
}

.feature-card__content {
  display: grid;
  grid-template-columns: minmax(0, 227.901fr) minmax(0, 331.46fr);
  gap: var(--space-16);
  min-height: 237px;
}

.feature-card--image-left .feature-card__content {
  grid-template-columns: minmax(0, 331.46fr) minmax(0, 227.901fr);
}

.feature-card__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  min-width: 0;
  padding-bottom: var(--space-24);
}

.feature-card .feature-card__text :is(h3, h4) {
  margin: 0;
}

.feature-card .feature-card__text p {
  margin: 0;
}

.feature-card__media {
  position: relative;
  min-width: 0;
}

.feature-card--image-left .feature-card__media {
  grid-column: 1;
  grid-row: 1;
}

.feature-card--image-left .feature-card__text {
  grid-column: 2;
  grid-row: 1;
}

.feature-card__media img {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: calc(var(--feature-image-width) * (100cqw / 574.902px));
  max-width: none;
  height: auto;
}

@media (max-width: 600px) {
  .feature-card {
    padding: var(--space-24) var(--space-24) 0;
  }

  .feature-card .feature-card__content {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-16);
  }

  .feature-card .feature-card__text {
    grid-column: 1;
    grid-row: 1;
    padding-bottom: 0;
  }

  .feature-card .feature-card__media {
    grid-column: 1;
    grid-row: 2;
    height: calc(237px * (100cqw / 331.46px));
  }

  .feature-card__media img {
    width: calc(var(--feature-image-width) * (100cqw / 331.46px));
  }
}