.db-cardgrid { background: var(--sand); }
.db-cardgrid .db-cardgrid__inner {
display: flex;
flex-direction: column;
gap: 24px;
padding-block: 40px;
} .db-cardgrid__head {
display: flex;
flex-direction: column;
gap: 12px;
max-width: 882px;
} .db-cardgrid__head h2 { line-height: 1.1333; }
.db-cardgrid__head p {
font-size: 16px;
line-height: 1.75;
color: var(--muted);
max-width: 793px;
}  .db-cardgrid .db-cardgrid__grid {
display: flex;
flex-direction: row;
gap: 16px;
margin-block: 0;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none; margin-right: calc(-1 * var(--wp--style--root--padding-right));
padding-right: var(--wp--style--root--padding-right);
}
.db-cardgrid .db-cardgrid__grid::-webkit-scrollbar { display: none; }
.db-cardgrid__card {
display: flex;
flex-direction: column;
gap: 24px;
flex: 0 0 300px;
scroll-snap-align: start;
}
.db-cardgrid__card img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.db-cardgrid__body {
display: flex;
flex-direction: column;
gap: 8px;
padding-right: 24px;
}
.db-cardgrid__card h3 { font-size: 1.125rem; line-height: 1.5556; }
.db-cardgrid__card p {
font-weight: 300;
font-size: 16px;
line-height: 1.75;
color: var(--muted);
}
@media (min-width: 861px) {
.db-cardgrid .db-cardgrid__inner { gap: 48px; padding-block: 120px; }
.db-cardgrid__head { gap: 24px; }
.db-cardgrid__head h2 { font-size: 3.75rem; } .db-cardgrid .db-cardgrid__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 16px;
overflow-x: visible;
margin-right: 0;
padding-right: 0;
}
.db-cardgrid__card { flex: 1 1 auto; } .db-cardgrid__card img { aspect-ratio: auto; height: 450px; }
.db-cardgrid__body { gap: 12px; padding-right: 68px; }
.db-cardgrid__card h3 { font-size: 1.5rem; line-height: 1.3333; } .db-cardgrid:not(.db-cardgrid--wines) .db-cardgrid__grid:has(> .db-cardgrid__card:nth-child(4):last-child) {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.db-cardgrid:not(.db-cardgrid--wines) .db-cardgrid__grid:has(> .db-cardgrid__card:nth-child(4):last-child) .db-cardgrid__body { padding-right: 24px; }
} .db-cardgrid--list .db-cardgrid__inner { padding-top: 0; } @media (max-width: 860.98px) {
.db-cardgrid--list .db-cardgrid__grid {
flex-direction: column;
gap: 40px;
overflow-x: visible; margin-right: 0;
padding-right: 0;
}
.db-cardgrid--list .db-cardgrid__card { flex: 1 1 auto; }
} .db-cardgrid--wines .db-cardgrid__card { gap: 16px; }
.db-cardgrid--wines .db-cardgrid__body { padding-right: 0; gap: 12px; }
.db-cardgrid--wines .db-cardgrid__card img {
aspect-ratio: 304 / 450;
height: auto;
mix-blend-mode: multiply;
} :root .db-cardgrid__foot { display: flex; align-items: baseline; gap: 10px; }
.db-cardgrid__foot .db-cardgrid__sep { margin: 0; font-size: 16px; line-height: 1.75; color: var(--muted); }
.db-cardgrid__foot .db-cardgrid__price {
margin: 0;
font-family: var(--font-display); text-transform: none;
font-size: 1.5rem;
line-height: 1.3333;
color: var(--ink);
}
.db-cardgrid__foot .db-cardgrid__vol { margin: 0; font-size: 16px; line-height: 1.75; color: var(--muted); } @media (min-width: 861px) {
.db-cardgrid--wines .db-cardgrid__grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 48px;
}
.db-cardgrid--wines .db-cardgrid__card img { height: auto; }
}
@media (min-width: 1200px) {
.db-cardgrid--wines .db-cardgrid__grid { gap: 48px 24px; }
} @media (min-width: 861px) { .db-cardgrid--wines .db-rail-nav,
.db-cardgrid--wines .db-rail-nav.is-ready { display: none; }
}
@media (max-width: 860.98px) {
.db-cardgrid--wines .db-rail-nav.is-ready { display: flex; justify-content: flex-end; }
} .db-cardgrid__note {
font-size: 14px;
line-height: 1.5714;
text-align: center;
color: var(--muted);
max-width: 590px;
margin-inline: auto;
} .db-cardgrid__foot .db-cardgrid__price { flex-shrink: 0; white-space: nowrap; } .db-sizes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.db-sizes__tab {
margin: 0;
padding: 0;
background: none;
border: none;
cursor: pointer;
font-family: var(--font-body);
font-size: 14px;
line-height: 1.4;
color: var(--muted);
transition: color .2s ease;
}
.db-sizes__tab:hover { color: var(--ink); }
.db-sizes__tab[aria-pressed="true"] { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.db-sizes__tab:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
.db-cardgrid__body.has-sizes > .db-cardgrid__foot { display: none; }
:root .db-cardgrid__body.has-sizes > .db-cardgrid__foot.is-active { display: flex; } .db-cardgrid__body.has-sizes { flex: 1; }
.db-cardgrid__body.has-sizes > .db-sizes { margin-top: auto; } .db-cardgrid__card .db-cutout img {
aspect-ratio: 1 / 1;
height: auto;
mix-blend-mode: multiply;
} .db-cardgrid--filtered .db-cardgrid__card.is-hidden { display: none; }