.color-showcase{background:var(--derma-cream-soft);padding:clamp(4rem,9vw,7rem) 6vw}.color-showcase__inner{max-width:76rem;margin:0 auto}.color-showcase__header{max-width:40ch;margin:0 auto clamp(2.5rem,5vw,4rem);text-align:center;display:flex;flex-direction:column;align-items:center}.color-showcase__heading{font-size:clamp(1.8rem,3.2vw,2.6rem)}.color-showcase__subheading{margin:1rem 0 0;font-size:1rem}.color-showcase__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2vw,1.75rem)}@media(max-width:990px){.color-showcase__grid{grid-template-columns:repeat(2,1fr)}}.color-card{display:flex;flex-direction:column;background:var(--derma-cream);border:1px solid var(--derma-border);border-radius:16px;overflow:hidden;text-decoration:none;transition:transform var(--derma-ease),box-shadow var(--derma-ease)}.color-card:hover{transform:translateY(-4px);box-shadow:0 18px 30px -18px #332d2759}.color-card__media{position:relative;aspect-ratio:4 / 5;overflow:hidden;background:var(--derma-cream-soft)}.color-card__image{width:100%;height:100%;object-fit:cover;display:block}.color-card__swatch{display:block;width:100%;height:100%;background:radial-gradient(circle at 50% 42%,#ffffff8c,#fff0 42%),radial-gradient(circle at 50% 50%,var(--swatch, #8fa3b8) 0%,color-mix(in srgb,var(--swatch, #8fa3b8) 70%,#2b2b2b) 68%,color-mix(in srgb,var(--swatch, #8fa3b8) 45%,#1a1a1a) 100%)}.color-card__body{display:flex;flex-direction:column;gap:.35rem;padding:1.35rem 1.4rem 1.6rem}.color-card__title{margin:0;font-family:var(--font-heading--family);font-size:1.15rem;font-weight:600;color:var(--derma-ink)}.color-card__tone{font-family:var(--font-body--family);font-size:.7rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--derma-accent-deep)}.color-card__description{margin:.3rem 0 0;font-family:var(--font-body--family);font-size:.9rem;line-height:1.6;color:var(--derma-ink-soft)}@media(max-width:749px){.color-showcase{padding:clamp(3rem,8vw,4.5rem) 5vw}.color-showcase__header{margin-bottom:2rem}.color-showcase__subheading{font-size:.95rem}.color-showcase__grid{gap:.75rem}.color-card{border-radius:14px}.color-card__media{aspect-ratio:1 / 1}.color-card__body{gap:.25rem;padding:.85rem .9rem 1.05rem}.color-card__title{font-size:1rem}.color-card__tone{font-size:.62rem;letter-spacing:.12em}.color-card__description{margin-top:.2rem;font-size:.8rem;line-height:1.5}}
/*# sourceMappingURL=/cdn/shop/t/2/assets/section-color-showcase.css.map */