@layer components{.hero__slide{grid-template-columns:var(--content-grid);scroll-snap-align:start;width:100%;height:100%;display:grid;position:relative;overflow:hidden}.hero__media{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.hero__media--placeholder{background-color:color-mix(in oklch, var(--color-foreground) 6%, var(--color-background))}.hero__media-link{display:block;position:absolute;inset:0}.hero__content{pointer-events:none;grid-column:2;position:relative}}