.content-grid {
  --content-grid-bottom-link-color: color-mix(in srgb, var(--theme-body-readable) 70%, var(--theme-surface-fill));
  --content-grid-bottom-link-hover-color: var(--theme-body-readable);
  --content-grid-column-gap: 2.5rem;
  --content-grid-inline-pad: var(--section-rail-padding-inline);
  --content-grid-row-gap: 3.25rem;
  background: var(--theme-surface-fill);
  box-sizing: border-box;
  color: var(--theme-body-readable);
  isolation: isolate;
  margin-inline: calc(50% - 50vw);
  padding-block: calc(var(--theme-surface-section-padding-block) + var(--theme-surface-text-safe-block));
  padding-inline: var(--content-grid-inline-pad);
  position: relative;
  width: 100vw;
}

@supports (width: 100dvw) {
  .content-grid {
    margin-inline: calc(50% - 50dvw);
    width: 100dvw;
  }
}

.content-grid::before {
  background: var(--theme-surface-fill);
  content: "";
  inset-block: 0;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 100vw;
  z-index: -1;
}

@supports (width: 100dvw) {
  .content-grid::before {
    width: 100dvw;
  }
}

.content-grid.surface-blush {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.content-grid.surface-blush::before {
  background: var(--surface-canvas);
}

.content-grid.surface-blush::after {
  background: var(--theme-card-bg-strong);
  border-radius: clamp(1.5rem, 2vw, 2.5rem);
  box-shadow: var(--theme-card-shadow);
  content: "";
  inset-block: var(--theme-surface-panel-inset-block);
  inset-inline: var(--theme-surface-panel-inset-inline);
  pointer-events: none;
  position: absolute;
  z-index: -1;
}

.content-grid__inner {
  display: grid;
  gap: var(--content-grid-row-gap);
  margin-inline: 0;
  max-width: none;
  position: relative;
  width: 100%;
  z-index: 1;
}

.content-grid__intro {
  display: grid;
  gap: var(--space-5);
}

.content-grid__eyebrow,
.content-grid__heading :is(h1, h2, h3, h4, h5, h6, p),
.content-grid__lead :is(p, ul, ol),
.content-grid__card-eyebrow,
.content-grid__card-title,
.content-grid__body-copy,
.content-grid__card-action {
  margin: 0;
}

.content-grid__heading :is(h1, h2, h3, h4, h5, h6, p) {
  color: var(--theme-heading-strong);
  font-family: var(--font-display);
  font-size: clamp(2.15rem, 1.58rem + 2vw, 4rem);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.02;
}

.content-grid__lead {
  color: var(--theme-body-readable);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
  line-height: 1.65;
}

.content-grid__eyebrow {
  color: var(--theme-eyebrow-readable);
}

.content-grid__cards {
  align-items: start;
  display: grid;
  gap: var(--content-grid-row-gap) var(--content-grid-column-gap);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.content-grid__card {
  display: grid;
  gap: clamp(1.25rem, 1.5vw, 1.55rem);
  min-width: 0;
}

.content-grid__card {
  animation: none;
}

.smartify-motion-ready .content-grid:not(.smartify-motion-visible) .content-grid__card {
  opacity: 0;
  transform: translateY(5.6rem);
}

.content-grid.smartify-motion-visible .content-grid__card {
  animation: content-grid-fade-up 1600ms cubic-bezier(0.18, 0.86, 0.22, 1) both;
}

.content-grid.smartify-motion-visible .content-grid__card:nth-child(2) {
  animation-delay: 220ms;
}

.content-grid.smartify-motion-visible .content-grid__card:nth-child(3) {
  animation-delay: 440ms;
}

.content-grid.smartify-motion-visible .content-grid__card:nth-child(4) {
  animation-delay: 660ms;
}

.content-grid.smartify-motion-visible .content-grid__card:nth-child(5) {
  animation-delay: 880ms;
}

.content-grid.smartify-motion-visible .content-grid__card:nth-child(6) {
  animation-delay: 1100ms;
}

@keyframes content-grid-fade-up {
  from {
    opacity: 0;
    transform: translateY(5.6rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.content-grid__media {
  aspect-ratio: 1;
  background: color-mix(in srgb, var(--theme-card-bg-strong) 78%, var(--theme-surface-fill));
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

.content-grid--image-square .content-grid__media {
  aspect-ratio: 1;
}

.content-grid--image-landscape .content-grid__media {
  aspect-ratio: 16 / 10;
}

.content-grid__media::after {
  content: "";
  display: none;
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.content-grid--image-soft_monochrome .content-grid__media::after {
  display: none;
}

.content-grid__image {
  display: block;
  height: 100%;
  object-fit: cover;
  transition:
    filter var(--transition-base),
    transform 700ms ease;
  width: 100%;
}

.content-grid--image-soft_monochrome .content-grid__image {
  filter: grayscale(1) contrast(0.96);
}

.content-grid__card:hover .content-grid__image,
.content-grid__card:focus-within .content-grid__image {
  transform: scale(1.035);
}

.content-grid__card-content {
  display: grid;
  gap: 0.85rem;
}

.content-grid__card-eyebrow {
  color: var(--theme-card-eyebrow-readable);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.content-grid__card-title {
  color: var(--theme-heading-strong);
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.16rem + 0.46vw, 1.72rem);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.08;
}

.content-grid__body-copy {
  color: var(--theme-body-readable);
  font-size: clamp(0.92rem, 0.88rem + 0.12vw, 1rem);
  line-height: 1.55;
}

.content-grid__card-action {
  padding-top: 0.2rem;
}

.content-grid__link,
.content-grid__bottom-link {
  align-items: center;
  display: inline-flex;
  font-size: 0.88rem;
  font-weight: 800;
  gap: 0.55rem;
  line-height: 1.3;
  text-decoration: none;
  width: fit-content;
}

.content-grid__link {
  color: var(--theme-link-color);
}

.content-grid__bottom-link {
  color: var(--content-grid-bottom-link-color);
}

.content-grid__link:hover,
.content-grid__link:focus-visible {
  color: var(--theme-link-hover-color);
}

.content-grid__bottom-link:hover,
.content-grid__bottom-link:focus-visible {
  color: var(--content-grid-bottom-link-hover-color);
}

.content-grid__link-icon {
  flex: 0 0 auto;
  transition: transform var(--transition-base);
}

.content-grid__link:hover .content-grid__link-icon,
.content-grid__link:focus-visible .content-grid__link-icon,
.content-grid__bottom-link:hover .content-grid__link-icon,
.content-grid__bottom-link:focus-visible .content-grid__link-icon {
  transform: translateX(0.18rem);
}

.content-grid__bottom-action {
  display: flex;
  justify-content: center;
  padding-top: 0.25rem;
}

.content-grid__bottom-link {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1rem + 0.32vw, 1.32rem);
  font-style: italic;
  font-weight: 600;
}

.surface-ink .content-grid__link,
[data-surface="ink"] .content-grid__link {
  color: color-mix(in srgb, var(--color-primary-accent) 72%, #fffaf5 28%);
}

.surface-ink .content-grid__link:hover,
.surface-ink .content-grid__link:focus-visible,
[data-surface="ink"] .content-grid__link:hover,
[data-surface="ink"] .content-grid__link:focus-visible {
  color: color-mix(in srgb, var(--color-primary-accent) 84%, #fffaf5 16%);
}

@media (max-width: 991px) {
  .content-grid__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .content-grid {
    padding-block: calc(var(--section-band-space-y) - var(--space-2));
  }

  .content-grid__inner {
    gap: clamp(2.5rem, 10vw, 4rem);
  }

  .content-grid__cards {
    grid-template-columns: 1fr;
  }

  .content-grid__bottom-action {
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .content-grid__card,
  .content-grid__image,
  .content-grid__link-icon {
    animation: none !important;
    opacity: 1;
    transform: none;
    transition: none;
  }
}