.dc-mosaic {
    --dc-gap: clamp(8px, 1vw, 16px);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(4, clamp(165px, 14vw, 235px));
    grid-template-areas:
        "valora velvet velvet eros"
        "lucas  velvet velvet eros"
        "boss   boss   bentley mila"
        "forest forest bentley mila";
    gap: var(--dc-gap);
    width: min(100%, 1480px);
    margin-inline: auto;
}

.dc-card { position: relative; display: block; overflow: hidden; min-width: 0; border-radius: 14px; isolation: isolate; color: #fff; background: #eee; }
.dc-card--velvet { grid-area: velvet; }
.dc-card--valora { grid-area: valora; }
.dc-card--eros { grid-area: eros; }
.dc-card--lucas { grid-area: lucas; }
.dc-card--boss { grid-area: boss; }
.dc-card--bentley { grid-area: bentley; }
.dc-card--mila { grid-area: mila; }
.dc-card--forest { grid-area: forest; }

.dc-card picture,
.dc-card img { display: block; width: 100%; height: 100%; }
.dc-card img { object-fit: cover; transition: transform .65s cubic-bezier(.2,.7,.2,1), filter .4s ease; }
.dc-card__shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(9,9,9,.02) 30%, rgba(9,9,9,.76) 100%); transition: opacity .35s ease; }
.dc-card--dark { color: #21160e; }
.dc-card--dark .dc-card__shade { background: linear-gradient(180deg, rgba(255,255,255,.02) 35%, rgba(247,232,212,.78) 100%); }
.dc-card__content { position: absolute; inset: auto 0 0; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; padding: clamp(16px, 2vw, 30px); }
.dc-card--bottom-right .dc-card__content { align-items: flex-end; text-align: right; }
.dc-card--top-left .dc-card__content { inset: 0 0 auto; }
.dc-card--top-right .dc-card__content { inset: 0 0 auto; align-items: flex-end; text-align: right; }
.dc-card__eyebrow { margin-bottom: 7px; font-size: clamp(10px, .78vw, 13px); font-weight: 700; letter-spacing: .09em; line-height: 1.2; text-transform: uppercase; opacity: .88; }
.dc-card__title { max-width: 18ch; font-size: clamp(20px, 1.7vw, 34px); font-weight: 750; line-height: 1.02; letter-spacing: -.035em; text-wrap: balance; }
.dc-card__price { margin-top: 10px; color: inherit; font-size: clamp(15px, 1.15vw, 21px); font-weight: 800; line-height: 1.1; }
.dc-card__price .amount,
.dc-card__price del,
.dc-card__price ins { color: inherit; }
.dc-card__price del { margin-right: 7px; opacity: .7; font-size: .78em; }
.dc-card__price ins { text-decoration: none; }
.dc-card__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 9px 13px; border: 1px solid currentColor; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1; backdrop-filter: blur(7px); transition: gap .25s ease, background-color .25s ease, color .25s ease; }
.dc-card--light .dc-card__cta { background: rgba(255,255,255,.12); }
.dc-card--dark .dc-card__cta { background: rgba(255,255,255,.32); }
.dc-card:hover img { transform: scale(1.045); filter: saturate(1.07) contrast(1.02); }
.dc-card:hover .dc-card__cta { gap: 13px; background: #fff; color: #17120e; }
.dc-card:focus-visible { outline: 3px solid #d82074; outline-offset: 3px; }

@media (max-width: 1024px) {
    .dc-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(6, 245px); grid-template-areas: "velvet velvet" "velvet velvet" "valora eros" "lucas boss" "forest forest" "bentley mila"; }
}

@media (max-width: 640px) {
    .dc-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 300px 215px 215px 270px 260px; grid-template-areas: "velvet velvet" "valora eros" "lucas boss" "forest forest" "bentley mila"; gap: 9px; }
    .dc-card { border-radius: 10px; }
    .dc-card__content { padding: 15px; }
    .dc-card__eyebrow { display: none; }
    .dc-card__title { font-size: clamp(17px, 5vw, 24px); }
    .dc-card__cta { margin-top: 10px; padding: 8px 10px; font-size: 10px; }
    .dc-card--forest .dc-card__title,
    .dc-card--velvet .dc-card__title { font-size: 27px; }
}

@media (prefers-reduced-motion: reduce) {
    .dc-card img,
    .dc-card__cta { transition: none; }
}