@layer components{a.layout{color:var(--text)}.layout{--_visual-ratio:3 / 2;--_alignment:start;--_column-count:1;column-gap:var(--site-gutter);row-gap:var(--space-8);grid-template-columns:repeat(var(--_column-count), minmax(0, 1fr));flex-direction:column;align-items:stretch;width:100%;text-decoration:none;display:flex;&>*{align-items:var(--_alignment,start);text-align:var(--_alignment,start);flex-direction:column;width:100%;max-width:100%;display:flex}&>:first-child{align-self:center}&>:last-child:not(:has(>:not(.image,.image-parallax,.video,.overlay))){border-radius:var(--radius-xs);aspect-ratio:var(--_visual-ratio);position:relative;&>:is(.image,.image-parallax,.video,.overlay){border-radius:inherit;width:100%;height:100%;position:absolute;inset:0}}&.centered{--_alignment:center}&.auto-width{justify-content:space-between;align-items:end;row-gap:var(--space-6);flex-flow:wrap;&>*{align-self:unset;width:auto}&>:last-child{min-width:min(4rem,100%)}}&.columns{column-gap:var(--section-space-small);display:grid;@media (width>=64rem){--_column-count:2;&.reversed{&>:last-child{order:-1}}}}&.sticky-content{--_visual-ratio:1 / 1;display:grid;@media (width>=64rem){--_column-count:2;&>:first-child{top:calc(var(--site-margin) + var(--nav-height));align-self:start;position:sticky}}}&.sticky-visual{--_visual-ratio:1 / 1;display:grid;@media (width>=64rem){--_column-count:2;&>:first-child{align-self:start}&>:last-child{top:calc(var(--site-margin) + var(--nav-height));max-height:calc(100svh - var(--nav-height) - var(--site-margin) * 2);align-self:start;position:sticky}}}&.breakout{flex-shrink:0;align-self:center;gap:0;width:100vw;display:grid;&>:first-child{width:var(--site-width);padding-block:var(--section-space-medium);margin-inline:auto}&>:last-child{border-radius:0}@media (width>=64rem){--_column-count:2;&>:first-child{max-width:calc(var(--max-width-main) / 2)}&>:last-child{border-top-left-radius:var(--radius-xs);border-bottom-left-radius:var(--radius-xs)}&.reversed{&>:last-child{border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--radius-xs);border-bottom-right-radius:var(--radius-xs);order:-1}}}}&.contain{background-color:var(--background-2);border-radius:var(--radius-md);gap:0;display:grid;position:relative;overflow:clip;&>:first-child{padding:var(--space-6)}&>:last-child{border-radius:0}@media (width>=64rem){--_column-count:2;&.reversed{&>:last-child{order:-1}}}}&.card{border-radius:var(--radius-md);justify-content:center;min-height:26rem;position:relative;overflow:clip;&>:first-child{padding:var(--space-6);padding-block:var(--section-space-medium);padding-inline:var(--space-5);z-index:1;--_alignment:center;position:relative}&>:last-child{width:100%;height:100%;opacity:calc(var(--_media-opacity,70) / 100);pointer-events:none;border-radius:0;position:absolute;inset:0}}&.card.card-hover{&>:last-child{transition:scale var(--card-hover-speed) var(--card-hover-easing)}& .badge{transition:background-color var(--card-hover-arrow-speed) ease-out, color var(--card-hover-arrow-speed) ease-out}@media (hover:hover){&:hover>:last-child{scale:var(--card-hover-zoom)}&:hover .badge.soft{background-color:var(--brand);color:var(--brand-contrast)}&:hover>.card_arrow{opacity:1;translate:0;scale:1}}}}.card_arrow{z-index:2;width:var(--card-hover-arrow);height:var(--card-hover-arrow);background-color:var(--photo-plate);color:var(--photo-plate-text);border-radius:var(--radius-sm);font-size:var(--card-hover-arrow-icon);pointer-events:none;opacity:0;scale:.8;translate:0 calc(var(--card-hover-inset) * -.5);transition:opacity var(--card-hover-arrow-speed) var(--card-hover-easing), scale var(--card-hover-arrow-speed) var(--card-hover-easing), translate var(--card-hover-arrow-speed) var(--card-hover-easing);justify-content:center;align-items:center;display:flex;position:absolute;inset-block-start:var(--card-hover-inset);inset-inline-end:var(--card-hover-inset);&>.icon{transform:rotate(-45deg)}}@media (prefers-reduced-motion:reduce){.layout.card.card-hover>:last-child,.card_arrow{transition:opacity var(--card-hover-arrow-speed) ease-out}.layout.card.card-hover:hover>:last-child{scale:1}.card_arrow{translate:0;scale:1}}}