*{box-sizing:border-box}:root{--color-default-state: grey;--color-hover-state: rgb(107, 107, 195);--color-selected-state: rgb(17, 26, 101)}body{display:grid;height:100vh;place-items:center}.carousel{display:grid;grid-template-columns:3em 80vw 3em;grid-template-rows:70vh 3em;align-items:center;grid-gap:1em}.carousel>*:nth-child(2){grid-column:2;align-self:stretch}.carousel__contents-container{overflow:hidden}.carousel__contents{position:relative;transform:translate(0);transition:transform .3s ease-out;width:100%;height:100%}.carousel__slide{position:absolute;width:inherit;height:inherit}.carousel__slide>a{display:block;width:inherit;height:inherit}.carousel__slide img{width:inherit;height:inherit;object-fit:cover;object-position:center center}.carousel__button{padding:.25em;border:none}.carousel__button svg{fill:var(--color-default-state)}.carousel__button:hover svg,.carousel__button:active svg,.carousel__button:focus svg,.carousel__button:focus-visible svg{fill:var(--color-hover-state)}.carousel__dots{grid-column:1 /-1;justify-self:center}.carousel__dot{width:1em;height:1em;padding:0;border-radius:100%;background-color:var(--color-default-state)}.carousel__dot+.carousel__dot{margin-left:1em}.carousel__dot:hover{background:var(--color-hover-state)}.carousel__dot.is-selected{background:var(--color-selected-state)}.is-hidden{display:none}