@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.fadeIn{animation-name:fadeIn;animation-duration:1s;animation-delay:0ms;animation-iteration-count:1;animation-timing-function:ease-in-out}.fadeOut{animation-name:fadeOut;animation-duration:1s;animation-delay:0ms;animation-iteration-count:1;animation-timing-function:ease-in-out}.outer-container{display:grid;grid-template-columns:40px 1fr 40px;grid-template-rows:1fr 40px 1fr;width:calc(100% + 2*var(--gap));margin-left:calc(var(--gap)*-1)}.outer-container:hover button{display:block}.outer-container button{display:none;grid-row:2;z-index:1}.left{grid-column:1}.right{grid-column:3}.container{grid-row-start:1;grid-row-end:4;grid-column-start:1;grid-column-end:4;display:grid;justify-content:center;gap:var(--gap)}.horizontal-media-scroller::-webkit-scrollbar{display:none}.horizontal-media-scroller{--size: 150px;display:grid;grid-auto-flow:column;gap:calc(var(--gap) / 2);margin:0;padding-inline-start:var(--gap);padding-inline-end:var(--gap);padding-block-start:calc(var(--gap) / 2);padding-block-end:calc(var(--gap) / 2);overflow-x:auto;scroll-snap-type:inline mandatory;scroll-padding-left:var(--gap);scroll-padding-right:var(--gap);scroll-padding-inline:var(--gap);scroll-behavior:smooth}.horizontal-media-scroller>li{display:inline-block}.horizontal-media-scroller>li:last-of-type figure{position:relative}.horizontal-media-scroller>li:last-of-type figure:after{content:"";position:absolute;inline-size:var(--gap);block-size:100%;inset-block-start:0;inset-inline-end:calc(var(--gap) * -1)}.horizontal-media-scroller figure{scroll-snap-align:start}.horizontal-media-scroller a{display:inline-block;text-decoration:none;color:inherit;outline-offset:12px}.horizontal-media-scroller a:focus{outline-offset:7px}@media (prefers-reduced-motion: no-preference){.horizontal-media-scroller a{transition:outline-offset .25s ease}}figure{display:grid;gap:calc(var(--gap) / 2);margin:0;cursor:pointer;-webkit-user-select:none;user-select:none}figure>picture{inline-size:var(--size);block-size:var(--size)}figure>picture :hover{transform:scale(1.05)}figure img{inline-size:100%;block-size:100%;object-fit:cover;border-radius:1ex;overflow:hidden;background-image:linear-gradient(to bottom,#666,#333)}@supports (aspect-ratio: 1){.horizontal-media-scroller figure>picture{inline-size:auto;aspect-ratio:1}}@keyframes octocat-wave{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}body{min-height:100%;padding:0;margin:0;font-family:Montserrat}
