@layer components{.picture{display:block;background:var(--project-colour);aspect-ratio:var(--ratio-mobile,var(--ratio,auto))}@media (min-width:48rem){.picture{aspect-ratio:var(--ratio,auto)}}.picture img{inline-size:100%;block-size:100%;object-fit:cover}.picture--native img{block-size:auto;object-fit:fill}.picture--alpha{background:transparent}.picture--video{position:relative;overflow:hidden}.picture--video .video__poster,.picture--video .video__clip{position:absolute;inset:0;inline-size:100%;block-size:100%}.picture--video .video__poster{aspect-ratio:auto;background:transparent}.picture--video .video__poster img,.picture--video .video__clip{block-size:100%;object-fit:cover;object-position:var(--focus-mobile,var(--focus,50% 50%))}@media (min-width:48rem){.picture--video .video__poster img,.picture--video .video__clip{object-position:var(--focus,50% 50%)}}:root.js .picture img[loading='lazy']{opacity:0;animation:picture-unhide 1ms 2.5s forwards}:root.js .picture img[loading='lazy'].is-loaded{opacity:1;animation:none;transition:opacity var(--duration-base) var(--ease-out)}@keyframes picture-unhide{to{opacity:1}}@media (prefers-reduced-motion:reduce){:root.js .picture img[loading='lazy']{opacity:1;animation:none;transition:none}}}