.shade-code-grid__column-title{white-space:nowrap}@media screen and (max-width:999px){.shade-code-grid__cta .button{width:100%}}@media screen and (max-width:999px){.shade-code-grid__column-title{font-size:12px}}.shade-code-grid__swatches{display:grid;grid-template-columns:minmax(0,1fr);gap:1.5rem}@media screen and (min-width:1000px){.shade-code-grid__swatches{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}}.shade-code-grid__swatch{position:relative;display:flex;flex-direction:column}.shade-code-grid__code{position:absolute;inset-block-start:.75rem;inset-inline-start:.75rem;z-index:2;color:#fff;margin:0;font-size:30px}@media screen and (min-width:1000px){.shade-code-grid__code{position:static;color:inherit;font-size:54px;margin-block-end:.875rem}}.shade-code-grid__tile{position:relative;display:block;overflow:hidden;aspect-ratio:169 / 150}@media screen and (min-width:1000px){.shade-code-grid__tile{aspect-ratio:3 / 4}}.shade-code-grid__link{position:absolute;top:0;right:0;bottom:0;left:0;display:block}.shade-code-grid__media{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .2s ease}.shade-code-grid__caption{position:absolute;inset-inline:0;inset-block-end:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:.375rem;padding:.375rem .625rem;font-size:11px;text-align:left;text-transform:uppercase;letter-spacing:.05em;color:#fff;background:#1d1d1bd1}.shade-code-grid__caption .icon{width:.875rem;height:.875rem;flex-shrink:0}@media screen and (min-width:1000px){.shade-code-grid__caption{position:static;justify-content:flex-start;text-align:left;color:rgb(var(--text-color) / .6);background:transparent;transition:background-color .2s ease,color .2s ease}.shade-code-grid__caption .icon{display:none}}@media screen and (min-width:1000px)and (hover:hover){.shade-code-grid__swatch:hover .shade-code-grid__caption,.shade-code-grid__swatch:focus-within .shade-code-grid__caption{justify-content:center;text-align:center;background:#fff;color:#111}}@media(hover:hover){.shade-code-grid__swatch:hover .shade-code-grid__media,.shade-code-grid__swatch:focus-within .shade-code-grid__media{opacity:1}}@media screen and (max-width:999px){.shade-code-grid__tile--show-media .shade-code-grid__media{opacity:1}}
/*# sourceMappingURL=/cdn/shop/t/5/assets/shade-code-grid.css.map */