/* The format library introduces the vocabulary used by the native matrix. */
.creative-system{padding:90px 0 80px;overflow:clip;background:var(--night)}
.creative-system-heading{display:grid;grid-template-columns:1.2fr 1fr;gap:80px;align-items:end;margin-bottom:54px}
.creative-system-heading h2{font-size:clamp(36px,3.35vw,48px);max-width:15ch}.creative-system-heading p{font-size:15px;line-height:1.75;color:var(--muted);max-width:40ch}
.formats-rail{position:relative;overflow:hidden;padding:8px 0 28px;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.formats-rail:before,.formats-rail:after{content:'';position:absolute;z-index:5;top:0;bottom:0;width:12%;pointer-events:none;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.formats-rail:before{left:0;mask-image:linear-gradient(90deg,#000,transparent)}.formats-rail:after{right:0;mask-image:linear-gradient(90deg,transparent,#000)}
.formats-track{display:flex;width:max-content;animation:formats-drift 58s linear infinite;animation-play-state:paused}.formats-rail[data-moving=true] .formats-track{animation-play-state:running}.formats-rail:hover .formats-track,.formats-rail:focus-within .formats-track{animation-play-state:paused}
.formats-group{display:flex;gap:18px;padding-right:18px}.format-slide{width:210px;flex:none}.format-slide rintrah-glass{width:100%;border-radius:12px}
@keyframes formats-drift{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.placement-stack .placement-square,.placement-stack .placement-story{padding:0!important;overflow:hidden;background:none!important}.placement-stack rintrah-glass{width:100%;height:100%;border-radius:8px}.placement-stack .placement-square rintrah-glass{aspect-ratio:1}.placement-stack .placement-story rintrah-glass{aspect-ratio:9/16}
@media(min-width:1700px){.format-slide{width:240px}}
@media(max-width:1000px){.creative-system-heading{gap:40px}.format-slide{width:190px}}
@media(max-width:700px){.creative-system{padding:65px 0 45px}.creative-system-heading{grid-template-columns:1fr;gap:22px;margin-bottom:38px}.creative-system-heading h2{font-size:36px}.creative-system-heading p{font-size:15px}.format-slide{width:175px}.formats-group{gap:12px;padding-right:12px}.formats-rail{mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}.formats-rail:before,.formats-rail:after{width:8%}}
@media(prefers-reduced-motion:reduce){.formats-rail{overflow-x:auto;mask-image:none;padding-inline:20px}.formats-track{animation:none;transform:none}.formats-group[aria-hidden]{display:none}.formats-rail:before,.formats-rail:after{display:none}}

.brand-specimen{position:relative;isolation:isolate;overflow:hidden}.brand-format-art{position:absolute;z-index:-1;inset:0;width:100%;height:100%;border:0;border-radius:0;mix-blend-mode:soft-light;opacity:.6;box-shadow:none}.brand-specimen .brand-specimen-rule{opacity:.5}

#formats{padding-block:90px 60px}.creative-system-heading{align-items:center;margin-bottom:38px}.creative-system-heading h2{max-width:20ch}.formats-rail{padding-bottom:24px}
@media(max-width:700px){#formats{padding-block:60px 30px}.creative-system-heading{margin-bottom:28px}}

.format-slide{margin:0;width:240px}.format-slide>img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:contain;border-radius:8px}.format-slide>figcaption{padding:15px 2px 0;color:var(--muted);font:12px/1.4 var(--mono)}
.brand-specimen{padding:14px!important;background:#090909!important;display:flex;align-items:center;justify-content:center}.brand-specimen>img{display:block;height:100%;max-height:330px;max-width:100%;object-fit:contain}.forgies-colours{display:flex;gap:8px;margin-block:16px}.forgies-colours span{width:22px;height:22px;border-radius:50%;border:1px solid #ffffff30;background:#11140c}.forgies-colours span:nth-child(2){background:#f0e6ca}.forgies-colours span:nth-child(3){background:#b7351a}
.placement-stack .placement-square,.placement-stack .placement-story{aspect-ratio:4/5!important;height:auto!important;background:#090909!important}.placement-stack img{display:block;width:100%;height:100%;object-fit:contain}
@media(max-width:700px){.format-slide{width:200px}}

.format-slide-video{width:169px}.format-slide>video{display:block;width:100%;height:300px;object-fit:contain;border-radius:8px}
@media(max-width:700px){.format-slide-video{width:141px}.format-slide>video{height:250px}}