.base-card {
  position: relative;
  height: 100%;

  > div {
    display: flex;
    flex-direction: column-reverse;
  }

  .media {
    position: relative;
    clip-path: inset(0 round var(--s2a-border-radius-md));
    overflow: hidden;
    width: 100%;

    > picture {
      display: block;
    }

    .icon {
      height: 24px;
      width: 24px;
      position: absolute;
      top: var(--s2a-spacing-md);
      inset-inline-start: var(--s2a-spacing-md);
      z-index: 1;

      img {
        width: 24px;
      }
    }

    > div,
    > picture {
      height: 100%;
      width: 100%;
    }

    picture:not(.icon) img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      transition: transform 0.3s ease;
    }
  }

  &:not(.featured) .media {
    /* padding-bottom locks 4:3 even when aspect-ratio fails */
    height: 0;
    padding-bottom: 75%;
    background: #e8eef6;
  }

  &:not(.featured) .media > picture:not(.icon) {
    position: absolute;
    inset: 0;
  }

  &:hover .media picture:not(.icon) img {
    transform: scale(1.05);
  }

  .foreground {
    padding: var(--s2a-spacing-md) var(--s2a-spacing-md) 0 var(--s2a-spacing-md);

    :is(h1, h2, h3, h4, h5, h6) {
      margin-bottom: var(--s2a-spacing-sm);
      color: var(--s2a-color-gray-1000);
    }

    .standalone-link {
      color: var(--s2a-color-gray-1000);
      text-decoration: none;
      display: inline-block;
      margin-top: var(--s2a-spacing-md);
      margin-inline-end: var(--s2a-spacing-sm);
      margin-bottom: var(--s2a-spacing-2xs);

      &::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
      }
    }
  }

  p {
    color: var(--s2a-color-transparent-black-64);
  }

  &.featured {
    .foreground {
      padding: var(--s2a-spacing-md) var(--s2a-spacing-md) var(--s2a-spacing-2xl) var(--s2a-spacing-md);
    }

    .parallax-featured-card-media {
      animation-name: grow-featured-card-radius;
      will-change: clip-path;
    }
  }
}

@keyframes grow-featured-card-radius {
  from { clip-path: inset(0 round 0); }
  to { clip-path: inset(0 round var(--s2a-border-radius-md)); }
}

@media (width < 768px) {
  div.section.base-card-section {
    grid-template-columns: 1fr;
    gap: var(--s2a-spacing-2xl);
  }
}

@media (width >= 768px) {
  .base-card {
    &.featured {
      .foreground {
        padding: var(--s2a-spacing-md) var(--s2a-spacing-md) var(--s2a-spacing-2xl) var(--s2a-spacing-md);
      }
    }
  }
}

@media (width >= 1024px) {
  .base-card {
    .foreground {
      :is(h1, h2, h3, h4, h5, h6) { margin-bottom: var(--s2a-spacing-sm); }
    }

    &.featured {
      .media {
        height: 0;
        padding-bottom: calc(100% / 2.2);
        aspect-ratio: unset;
      }

      .media > picture:not(.icon) {
        position: absolute;
        inset: 0;
      }

      .foreground {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        row-gap: var(--s2a-spacing-sm);

        :is(h1, h2, h3, h4, h5, h6) {
          grid-row: 1;
          grid-column: 1 / span 5;
          margin-bottom: 0;
        }

        p:has(> a) {
          grid-row: 1;
          grid-column: 6 / -1;
          align-self: center;
          display: flex;
          justify-content: flex-end;
        }

        p:not(:has(> a)) {
          grid-column: 1 / span 5;
        }

        p:has(> a) a {
          margin-top: 0;
        }
      }
    }
  }
}

@media (width >= 1280px) {
  .base-card {
    &.featured .foreground {
      padding: var(--s2a-spacing-md) var(--s2a-spacing-md) var(--s2a-spacing-4xl) var(--s2a-spacing-md);
    }

    .foreground {
      padding: var(--s2a-spacing-md) var(--s2a-spacing-md) 0 var(--s2a-spacing-md);
    }
  }
}

@media (width >= 2560px) {
  .base-card.featured .parallax-featured-card-media {
    animation-name: none;
  }
}

/* === three-up: hard-lock equal media size === */
.section.three-up.base-card-section,
.section.Three-up.base-card-section {
  align-items: stretch;
}

.section.three-up > .base-card:not(.featured),
.section.Three-up > .base-card:not(.featured) {
  align-self: stretch;
  height: 100%;
  contain: none;
}

.section.three-up > .base-card:not(.featured) > div,
.section.Three-up > .base-card:not(.featured) > div {
  height: 100%;
}

.section.three-up > .base-card:not(.featured) .media,
.section.Three-up > .base-card:not(.featured) .media,
.section.three-up > .base-card:not(.featured) > div > div:has(> picture),
.section.Three-up > .base-card:not(.featured) > div > div:has(> picture) {
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  padding: 0 !important;
  aspect-ratio: 4 / 3 !important;
  flex: none !important;
  overflow: hidden !important;
  background: #e8eef6;
  border-radius: var(--s2a-border-radius-md, 16px);
}

.section.three-up > .base-card:not(.featured) .media > picture,
.section.Three-up > .base-card:not(.featured) .media > picture,
.section.three-up > .base-card:not(.featured) > div > div:has(> picture) > picture,
.section.Three-up > .base-card:not(.featured) > div > div:has(> picture) > picture {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  display: block !important;
}

.section.three-up > .base-card:not(.featured) .media picture img,
.section.Three-up > .base-card:not(.featured) .media picture img,
.section.three-up > .base-card:not(.featured) > div > div:has(> picture) picture img,
.section.Three-up > .base-card:not(.featured) > div > div:has(> picture) picture img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  transform: scale(1) !important;
  transform-origin: center center;
  transition: transform 0.35s ease !important;
}

.section.three-up > .base-card:not(.featured) .media .parallax-scale-down,
.section.Three-up > .base-card:not(.featured) .media .parallax-scale-down {
  --parallax-scale: 1;
  animation: none !important;
  transform: none !important;
}

.section.three-up > .base-card:not(.featured):hover .media picture img,
.section.Three-up > .base-card:not(.featured):hover .media picture img {
  transform: scale(1.06) !important;
}