.cardSection { padding: 80px 0; }
.cardSection .wrap { padding-inline: 24px; }
.cardSection__head { display: flex; justify-content: space-between; gap: 24px; align-items: flex-end; }
.cardSection__intro { min-width: 0; }
.cardSection--recept .eyebrow { font-size: 12px; color: rgba(8, 38, 23, 0.6); }
.cardSection--produkt .eyebrow { font-size: 13px; color: rgba(8, 38, 23, 0.6); }
.cardSection .display.cardSection__title { padding-top: 8px; font-size: 74px; line-height: 68px; letter-spacing: 1.5px; color: var(--text); }
.cardSection__lead { max-width: 584px; margin: 0; padding-top: 16px; font-size: 16px; line-height: 24px; color: rgba(8, 38, 23, 0.7); }
.cardSection .btn--text { gap: 8px; opacity: 0.6; letter-spacing: 2.8px; flex-shrink: 0; }
.cardSection__grid { display: grid; padding-top: 32px; }
.cardSection--recept .cardSection__grid { grid-template-columns: repeat(4, minmax(0, 284px)); gap: 32px; justify-content: space-between; }
.cardSection--produkt .cardSection__grid { grid-template-columns: repeat(4, minmax(0, 290px)); gap: 24px; justify-content: space-between; }

.recipeCard,
.productCard { text-decoration: none; color: inherit; display: flex; flex-direction: column; position: relative; min-width: 0; }

.recipeCard { background: transparent; overflow: visible; }
.recipeCard__body { background: transparent; transition: background-color 0.2s ease; }
.recipeCard:hover .recipeCard__body,
.recipeCard:focus-visible .recipeCard__body { background: var(--white); }
.recipeCard__image { display: block; position: relative; border-radius: 8px; overflow: hidden; width: 100%; height: 284px; background: rgba(15, 85, 50, 0.1); }
.recipeCard__image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(79deg, rgba(255, 255, 255, 0.2) 1.78%, rgba(102, 102, 102, 0) 52.82%); pointer-events: none; }
.recipeCard__image img { width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform 0.6s ease; }
.recipeCard__badge { position: absolute; left: 9px; top: 220px; z-index: 2; width: 70px; height: 72px; max-width: none; object-fit: contain; pointer-events: none; }
.recipeCard__body { display: flex; flex-direction: column; gap: 8px; padding: 12px 10px; border-radius: 0 0 8px 8px; }
.recipeCard__kicker { font-size: 10px; font-weight: 600; line-height: 20px; letter-spacing: 0.8px; text-transform: uppercase; color: rgba(8, 38, 23, 0.5); }
.recipeCard__content { display: flex; flex-direction: column; gap: 16px; }
.recipeCard__title { padding-top: 2px; font-family: var(--font-display); font-size: 28px; font-weight: 700; line-height: 27px; letter-spacing: 1.2px; text-transform: uppercase; }
.recipeCard__meta { display: flex; gap: 12px; align-items: center; }
.recipeCard__time { display: inline-flex; gap: 4px; align-items: center; opacity: 0.6; font-size: 10px; font-weight: 600; line-height: 20px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--text); }
.recipeCard__time img { width: 18px; height: 18px; max-width: none; }
.recipeCard__tag { display: inline-flex; align-items: center; box-sizing: border-box; width: 52px; padding: 0 6px; background: var(--green); color: var(--white); border-radius: 999px; font-size: 10px; font-weight: 600; line-height: 20px; letter-spacing: 0.8px; text-transform: uppercase; }

.productCard { background: transparent; border-radius: 8px; transition: background-color 0.2s ease; }
.productCard:hover,
.productCard:focus-visible { background: var(--white); }
.productCard__image { display: flex; align-items: center; justify-content: center; box-sizing: border-box; height: 202px; margin: 14px 20px 0; border-radius: 6.908px; overflow: hidden; }
.productCard__image img { width: auto; max-width: 100%; height: 100%; max-height: 100%; object-fit: contain; object-position: center; transition: transform 0.6s ease; }
.recipeCard:hover .recipeCard__image img,
.recipeCard:focus-visible .recipeCard__image img,
.productCard:hover .productCard__image img,
.productCard:focus-visible .productCard__image img { transform: scale(1.08); }
@media (prefers-reduced-motion: reduce) {
  .recipeCard__image img,
  .productCard__image img { transition: none; }
}
.productCard__body { display: flex; flex-direction: column; gap: 12px; padding: 0 30px 24px; }
.productCard__meta { font-size: 10px; font-weight: 600; line-height: 20px; letter-spacing: 0.8px; color: rgba(15, 85, 50, 0.6); }
.productCard__copy { display: flex; flex-direction: column; gap: 2px; }
.productCard__title { padding-top: 2px; font-family: var(--font-display); font-size: 28px; font-weight: 700; line-height: 27px; letter-spacing: 1.2px; text-transform: uppercase; }
.productCard__excerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; padding-top: 4px; font-size: 14px; line-height: 22px; color: #082617; }
.productCard__badge { position: absolute; top: 13px; left: 13px; background: var(--yellow); color: var(--green-dark); border-radius: 30px; padding: 1px 8px; font-size: 10px; font-weight: 600; line-height: 20px; letter-spacing: 0.8px; text-transform: uppercase; }

@media (max-width: 1200px) {
  .cardSection--recept .cardSection__grid,
  .cardSection--produkt .cardSection__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; }
}
@media (max-width: 980px) {
  .cardSection__title { font-size: 42px; line-height: 40px; }
}
@media (max-width: 640px) {
  .cardSection { padding: 48px 0; }
  .cardSection__head { flex-direction: column; align-items: flex-start; }
  .cardSection .display.cardSection__title { font-size: 40px; line-height: 38px; }
  .cardSection--recept .cardSection__grid,
  .cardSection--produkt .cardSection__grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .recipeCard { container-type: inline-size; }
  .recipeCard__image { height: auto; aspect-ratio: 1; }
  .recipeCard__badge { top: calc(100cqi - 64px); }
  .recipeCard__meta { flex-wrap: wrap; }
}