@layer components{.image-gallery{--margin:40px;--padding:20px;width:min(calc(100% - var(--padding)),var(--layout-width));border-top:var(--layout-border-dashed);border-bottom:var(--layout-border-dashed);margin:40px auto;display:flex;position:relative}@media (width>=520px) and (width<=920px){.image-gallery{--padding:50px}}.image-gallery--free{border:none;width:100%}.image-gallery__inner{grid-template-columns:repeat(2,1fr);gap:1px;width:100%;margin:0 auto;display:grid}@media (width>=1001px){.image-gallery__inner{grid-template-rows:max-content;grid-template-columns:repeat(4,1fr)}}.image-gallery__item{aspect-ratio:1400/650;background-color:hsla(var(--grey-800),80%);width:100%;height:100%}.image-gallery--free .image-gallery__item{aspect-ratio:auto}.image-gallery--1 .image-gallery__item{grid-column:1/-1}@media (width>=1001px){.image-gallery.image-gallery--1 .image-gallery__inner{grid-template-rows:1fr}.image-gallery.image-gallery--2 .image-gallery__inner{grid-template-rows:250px 250px}.image-gallery:is(.image-gallery--2,.image-gallery--3) .image-gallery__item:not(:first-child),.image-gallery:has(:nth-child(4)) :nth-child(4),.image-gallery:has(:nth-child(5)) :nth-child(n+5){grid-column:span 2}.image-gallery:not(.image-gallery--1) :first-child,.image-gallery--2 :nth-child(2){grid-area:span 2/span 2}}.image-gallery__item{background:linear-gradient(to bottom right,var(--grey-100)0%,var(--grey-300)50%,var(--grey-000)100%)}.image-gallery--free .image-gallery__item{background:0 0}.image-gallery__backdrop{width:100%;height:100%;transition:background-color .16s var(--transition-easing);z-index:1}.image-gallery__backdrop:not(:focus):focus-within{backdrop-filter:blur(var(--blur));cursor:zoom-out;z-index:3;user-select:none;background-color:#0000001a;justify-content:center;align-items:center;display:flex;position:fixed;top:0;left:0}.image-gallery__image{object-fit:cover;border-radius:inherit;cursor:zoom-in;user-select:none;width:100%;height:100%}.image-gallery--free .image-gallery__image{border-radius:var(--radius-200)}.image-gallery__image>img{max-width:90vw;max-height:90vh}.image-gallery__image:focus{object-fit:contain;border-radius:var(--radius-200);pointer-events:none;z-index:4;width:auto;max-width:90%;height:auto;max-height:90%;animation:image-gallery-zoom-in .16s var(--transition-easing)}@keyframes image-gallery-zoom-in{0%{opacity:0;transform:scale(.98)}}.image-gallery__keyboard-indicator{font-size:var(--label);background-color:var(--grey-100);border-radius:var(--radius-100);z-index:5;padding:8px 12px;display:none;position:fixed;bottom:26px;left:50%;transform:translate(-50%)}@media (pointer:fine){.image-gallery:focus-within .image-gallery__keyboard-indicator{display:block}}.image-gallery__keyboard-indicator>code{font-size:calc(1rem - 2px);font-family:var(--monospace-font);background-color:var(--grey-000);border:1px solid var(--grey-200);border-radius:var(--radius-100);padding:2px 4px}}