.accessory-mosaic{padding-block:72px 96px}.accessory-mosaic__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:0;background:transparent}.accessory-mosaic__card{--accessory-card-padding: 24px;position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(32px,1fr) auto;justify-items:start;gap:16px;width:100%;min-width:0;min-height:260px;aspect-ratio:470 / 395;padding:var(--accessory-card-padding);border-radius:var(--interface-corner-radius, 10px);background:#f7f7f7;color:#131313;text-decoration:none}.accessory-mosaic__copy{position:relative;z-index:1;grid-row:1;min-width:0;width:100%}.accessory-mosaic__title{margin:0;color:inherit;font-size:20px;line-height:1.3;font-weight:600;overflow-wrap:anywhere}.accessory-mosaic__subtitle{margin:2px 0 0;font-size:18px;line-height:1.4;overflow-wrap:anywhere}.accessory-mosaic__image{position:absolute;z-index:0;top:0;right:0;bottom:0;left:0}.accessory-mosaic__image picture{display:block;height:100%}.accessory-mosaic__image img,.accessory-mosaic__image svg{display:block;width:100%;height:100%;object-fit:cover}.accessory-mosaic__button{position:relative;z-index:1;grid-row:3;display:inline-flex;align-items:center;justify-content:center;max-width:100%;min-height:32px;height:32px;padding:0 24px;border-radius:999px;background:var(--accessory-button-background, #ff5800);color:#fff;font-size:12px;line-height:1.4;text-align:center}.accessory-mosaic__card:hover .accessory-mosaic__button{background:var(--accessory-button-background, #e64f00)}:is(.template-x4-pro,.template-x4-classic,.template-x3) .accessory-mosaic{--accessory-button-background: #000}:is(.template-x4-pro,.template-x4-classic,.template-x3) .accessory-mosaic__copy{width:auto;justify-self:stretch;margin-inline:calc(16px - var(--accessory-card-padding))}:is(.template-x4-pro,.template-x4-classic,.template-x3) .accessory-mosaic__button{justify-self:start;margin-inline-start:calc(30px - var(--accessory-card-padding))}.accessory-mosaic__card:focus-visible{outline:2px solid #131313;outline-offset:3px}@media screen and (min-width:990px){.accessory-mosaic__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.7fr) minmax(0,1fr);grid-auto-rows:auto;grid-auto-flow:dense;padding:0}.accessory-mosaic__card{--accessory-card-padding: clamp(24px, 2.0833vw, 40px)}:is(.template-x4-pro,.template-x4-classic,.template-x3) .accessory-mosaic__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) minmax(0,1fr)}:is(.template-x4-pro,.template-x4-classic,.template-x3) .accessory-mosaic__card{--accessory-card-padding: clamp(12px, calc(4vw - 28px) , 40px);gap:8px;padding-block:clamp(10px,calc(3.125vw - 21px),24px)}.accessory-mosaic__title{font-size:clamp(16px,1.0417vw,20px)}.accessory-mosaic__subtitle{font-size:clamp(14px,.9375vw,18px)}.accessory-mosaic__card:nth-child(5n+1){grid-column:2;grid-row:span 2;aspect-ratio:auto}.accessory-mosaic__card:nth-child(5n+2),.accessory-mosaic__card:nth-child(5n+3){grid-column:1}.accessory-mosaic__card:nth-child(5n+4),.accessory-mosaic__card:nth-child(5n+5){grid-column:3}}@media screen and (max-width:989px){.accessory-mosaic{padding-block:40px}.accessory-mosaic__card:first-child{grid-column:1 / -1;aspect-ratio:1.7}}@media screen and (max-width:749px){.accessory-mosaic__card{--accessory-card-padding: 16px;gap:12px}.accessory-mosaic__title{font-size:14px}.accessory-mosaic__subtitle{font-size:12px}.accessory-mosaic__button{padding-inline:16px}body:is(.template-x4-pro,.template-x4-classic,.template-x3) .accessory-mosaic__grid{gap:5px}body:is(.template-x4-pro,.template-x4-classic,.template-x3) .accessory-mosaic__card{--accessory-card-padding: 10px;grid-template-rows:auto;align-content:start;justify-items:start;min-height:0;aspect-ratio:350 / 332;border-radius:0;text-align:left}body:is(.template-x4-pro,.template-x4-classic,.template-x3) .accessory-mosaic__card:first-child{aspect-ratio:710 / 430}body:is(.template-x4-pro,.template-x4-classic,.template-x3) .accessory-mosaic__card:nth-child(3){grid-area:3 / 1}body:is(.template-x4-pro,.template-x4-classic,.template-x3) .accessory-mosaic__card:nth-child(4){grid-area:2 / 2}body:is(.template-x4-pro,.template-x4-classic,.template-x3) .accessory-mosaic__card:not(:first-child) .accessory-mosaic__title{min-height:0;text-wrap:wrap}body:is(.template-x4-pro,.template-x4-classic,.template-x3) .accessory-mosaic__card .accessory-mosaic__button{display:none}body:is(.template-x4-pro,.template-x4-classic,.template-x3) .accessory-mosaic__card--product-fallback{grid-template-rows:auto minmax(0,1fr);gap:4px}body:is(.template-x4-pro,.template-x4-classic,.template-x3) .accessory-mosaic__card--product-fallback .accessory-mosaic__image{position:static;width:100%;min-height:0;mix-blend-mode:multiply}body:is(.template-x4-pro,.template-x4-classic,.template-x3) .accessory-mosaic__card--product-fallback .accessory-mosaic__image :is(img,svg){object-fit:contain}}@media screen and (max-width:409px){body:is(.template-x4-pro,.template-x4-classic,.template-x3) .accessory-mosaic__card{background:#f0f0f0}body:is(.template-x4-pro,.template-x4-classic,.template-x3) .accessory-mosaic__image:has(source){padding-top:clamp(10px,calc(100px - 23vw),26px);mix-blend-mode:darken}body:is(.template-x4-pro,.template-x4-classic,.template-x3) .accessory-mosaic__image:has(source) img{object-fit:contain;object-position:center bottom}}@media screen and (max-width:349px){body:is(.template-x4-classic,.template-x3) .accessory-mosaic__card:not(:first-child,.accessory-mosaic__card--product-fallback,:has(.accessory-mosaic__image source)){min-height:180px}body:is(.template-x4-classic,.template-x3) .accessory-mosaic__card:not(:first-child,.accessory-mosaic__card--product-fallback) .accessory-mosaic__image:not(:has(source)){padding-top:46px;mix-blend-mode:darken}}
/*# sourceMappingURL=/cdn/shop/t/206/assets/accessory-product-mosaic.css.map */