.studio-showcase__header{display:flex;flex-direction:column;gap:4px;margin-bottom:16px}.studio-showcase__header-main{display:flex;flex-direction:column;gap:4px}.studio-showcase__eyebrow{font-size:13px;letter-spacing:var(--hio-eyebrow-letter-spacing);text-transform:uppercase;color:var(--color-text);opacity:.7}.studio-showcase__lead{margin:6px 0 0;font-size:16px;line-height:1.5;color:var(--color-text);opacity:.85}.studio-showcase__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:dense;gap:8px}.studio-showcase__tile{position:relative;display:block;overflow:hidden;aspect-ratio:3 / 4;background:var(--color-text);color:#fff;text-decoration:none}.studio-showcase__tile--wide,.studio-showcase__tile--feature{grid-column:span 2;aspect-ratio:4 / 3}.studio-showcase__media{display:block;width:100%;height:100%}.studio-showcase__media img,.studio-showcase__media svg{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.6,.2,1)}.studio-showcase__tile:not(.studio-showcase__note):after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to bottom,#0b0b0b00 30%,#0b0b0b8c 62%,#0b0b0beb);pointer-events:none}.studio-showcase__caption{position:absolute;z-index:2;right:12px;bottom:12px;left:12px;display:flex;flex-direction:column;gap:4px}.studio-showcase__caption-title{position:relative;padding-top:9px;font-family:var(--font-head-family);font-weight:var(--font-header-weight);font-size:16px;line-height:1.2;color:#fff}.studio-showcase__caption-title:before{content:"";position:absolute;top:0;left:0;width:24px;height:3px;background:var(--color-button-background)}.studio-showcase__caption-text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;font-size:13px;line-height:1.4;color:#ffffffd1}.studio-showcase__note{background:var(--color-button-background);color:var(--color-button-text)}.studio-showcase__note-inner{display:flex;flex-direction:column;justify-content:flex-end;height:100%;padding:14px}.studio-showcase__note-number{font-family:var(--font-head-family);font-weight:var(--font-header-weight);font-size:34px;line-height:1}.studio-showcase__note-title{margin-top:6px;font-size:12px;font-weight:700;letter-spacing:var(--hio-eyebrow-letter-spacing);text-transform:uppercase}.studio-showcase__note-text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;margin-top:6px;font-size:13px;line-height:1.4;opacity:.8}.studio-showcase__footer-link{margin-top:14px}@media screen and (min-width:750px){.studio-showcase__header{max-width:640px;margin-bottom:36px}.studio-showcase__eyebrow{font-size:14px}.studio-showcase__lead{margin:6px 0 0;font-size:17px}.studio-showcase__grid{grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:118px;grid-auto-flow:dense;gap:12px}.studio-showcase__tile{aspect-ratio:auto;grid-column:span 5;grid-row:span 2}.studio-showcase__tile--tall{grid-row:span 4}.studio-showcase__tile--wide{grid-column:span 7;grid-row:span 2;aspect-ratio:auto}.studio-showcase__tile--feature{grid-column:span 7;grid-row:span 4;aspect-ratio:auto}.studio-showcase__caption{right:28px;bottom:26px;left:28px;gap:6px}.studio-showcase__caption-title{padding-top:12px;font-size:26px}.studio-showcase__caption-title:before{width:32px}.studio-showcase__caption-text{max-width:440px;font-size:15px}.studio-showcase__tile--wide .studio-showcase__caption-text,.studio-showcase__tile--feature .studio-showcase__caption-text{-webkit-line-clamp:3;line-clamp:3}.studio-showcase__note-inner{padding:22px}.studio-showcase__note-number{font-size:46px}.studio-showcase__footer-link{margin-top:24px}}@media(hover:hover)and (min-width:750px){.studio-showcase__caption-text{max-height:0;overflow:hidden;opacity:0;transform:translateY(4px);transition:max-height .4s ease,opacity .3s ease,transform .4s ease}.studio-showcase__tile:hover .studio-showcase__caption-text,.studio-showcase__tile:focus-visible .studio-showcase__caption-text{max-height:72px;opacity:1;transform:translateY(0)}.studio-showcase__tile:hover .studio-showcase__media img,.studio-showcase__tile:focus-visible .studio-showcase__media img{transform:scale(1.06)}a.studio-showcase__note{transition:background-color .3s ease}a.studio-showcase__note:hover,a.studio-showcase__note:focus-visible{background:color-mix(in srgb,var(--color-button-background) 88%,#000000)}}@media(prefers-reduced-motion:reduce){.studio-showcase__media img,.studio-showcase__caption-text{transition:none}.studio-showcase__tile:hover .studio-showcase__media img,.studio-showcase__tile:focus-visible .studio-showcase__media img{transform:none}}
/*# sourceMappingURL=/cdn/shop/t/8/assets/section-studio-showcase.css.map */