.co-product-3 {
  padding: 60px 0;
  color: var(--co-color-midnight);
  background: var(--co-color-desertcream);
  background: var(--co-color-gold);

  border-top-left-radius: 100px;
  border-top-right-radius: 100px;

  padding-bottom: 150px;

  @media (max-width: 749px) {
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;

    padding: 40px 0;
  }
}

.co-product-3__inner {}

.co-product-3__header {
  margin-bottom: clamp(24px, 5vw, 50px);
  text-align: center;
}

.co-product-3__subtitle {
  margin: 0 0 10px;
  font-family: var(--co-font-body);
  font-size: clamp(18px, 2.2vw, 32px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--co-color-grapefruit);
  text-transform: uppercase;
}

.co-product-3__title h2 {
  margin: 0;
}

.co-product-3__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 3vw, 30px);
  counter-reset: co-product-3-card;

  @media (max-width: 749px) {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

.co-product-3__card {
  counter-increment: co-product-3-card;
}

.co-product-3__card-visual {
  position: relative;
  aspect-ratio: 418 / 514;
  height: auto;
}

.co-product-3__card-visual::before {
  /* content: counter(co-product-3-card, decimal-leading-zero);
  position: absolute;
  top: 7%;
  left: 7%;
  mix-blend-mode: difference;
  color: #fff;
  z-index: 3;
  font-family: var(--co-font-title);
  font-size: clamp(34px, 4vw, 48px);
  line-height: 1; */
  /* color: var(--co-color-midnight); */
}

.co-product-3__card-media {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background: rgb(from var(--co-color-white) r g b / 0.2);
  mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjE0IiBoZWlnaHQ9IjI2MyIgdmlld0JveD0iMCAwIDIxNCAyNjMiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0zMC42NTkyIDFIMTgyLjQxNEMyMDIuNTk2IDEuMDAwMDggMjE2LjczNiAyMS42MDc4IDIxMC42NDcgNDAuOTUyMUMyMDIuMTM0IDY3Ljk5OTMgMTkzLjAxNyAxMDMuNDg0IDE5My4wMTcgMTMxLjVDMTkzLjAxNyAxNTkuNTE2IDIwMi4xMzQgMTk1LjAwMiAyMTAuNjQ3IDIyMi4wNDlDMjE2LjczNiAyNDEuMzkzIDIwMi41OTYgMjYyLjAwMSAxODIuNDE0IDI2Mi4wMDFIMzAuNjU5MkMxMC40Nzc2IDI2Mi4wMDEgLTMuNjYzMDMgMjQxLjM5MyAyLjQyNTc4IDIyMi4wNDlDMTAuOTM5MSAxOTUuMDAyIDIwLjA1NjYgMTU5LjUxNiAyMC4wNTY2IDEzMS41QzIwLjA1NjYgMTAzLjQ4NCAxMC45MzkxIDY3Ljk5OTMgMi40MjU3OCA0MC45NTIxQy0zLjY2MzA0IDIxLjYwNzcgMTAuNDc3NiAxIDMwLjY1OTIgMVoiIGZpbGw9IiNEOUQ5RDkiIHN0cm9rZT0iIzFBMUM3NCIgc3Ryb2tlLXdpZHRoPSIyIi8+Cjwvc3ZnPgo=");
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  mask-position: center;
}

.co-product-3__card-image,
.co-product-3__card-image img,
.co-product-3__card-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center;
}

.co-product-3__card-image img {
  object-fit: cover;
}

.co-product-3__card-placeholder {
  background: linear-gradient(135deg, var(--co-color-violet), var(--co-color-grapefruit));
}

.co-product-3__card-border {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  color: var(--co-color-midnight);
  overflow: visible;
  pointer-events: none;
}

.co-product-3__card-content {
  padding-top: clamp(20px, 3vw, 40px);
}

.co-product-3__card-title {
  margin: 0 0 8px;
  font-family: var(--co-font-title);
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
}

.co-product-3__card-text {
  /* font-family: var(--co-font-body); */
  font-size: clamp(18px, 1.2vw, 24px);
  /* line-height: 1.25; */
}