:root{color:#000;background:#fff;font-family:sans-serif}*{box-sizing:border-box}body{margin:0;padding:24px}button{color:inherit;font:inherit;text-align:start;cursor:pointer;background:0 0;border:0;padding:0}img{block-size:auto;inline-size:100%;display:block}.photos{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 16px;display:grid;& button{& img{outline-offset:-6px;outline:6px solid #0000;transition:outline-color .2s}@media (hover:hover){&:hover img{outline-color:#111}}}& span{padding-block-start:12px;font-size:.875rem;display:block}@media (width>=760px){grid-template-columns:repeat(3,minmax(0,1fr))}@media (width>=1200px){grid-template-columns:repeat(4,minmax(0,1fr))}}figure{margin:0;& figcaption{padding-block-start:16px}& p{margin:8px 0 0;font-size:.875rem}}nav{gap:8px;padding-block-end:24px;display:flex;& button{background:#fff;border:1px solid #111;place-items:center;width:56px;height:56px;font-family:Material Symbols Outlined,sans-serif;font-size:2rem;line-height:1;transition:all .2s;display:grid;&:first-child{margin-inline-end:auto}&:hover{color:#fff;background:#111}}}::view-transition-old(.photo){display:none}::view-transition-new(.photo){animation-name:none}::view-transition-group(.slide-next),::view-transition-group(.slide-prev){overflow:clip}::view-transition-group(.slide-next){--direction:1}::view-transition-group(.slide-prev){--direction:-1}::view-transition-new(.slide-next),::view-transition-new(.slide-prev){animation:.5s slide-in}::view-transition-old(.slide-next),::view-transition-old(.slide-prev){animation:.5s slide-out}@keyframes slide-in{0%{translate:calc(var(--direction) * 100%) 0}}@keyframes slide-out{to{translate:calc(var(--direction) * -100%) 0}}