.video-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));grid-gap:1rem}.video-list__item{background-color:var(--color-jet);border-radius:6px;display:flex;flex-direction:column;overflow:hidden;padding:0 0 1.125rem;text-decoration-color:var(--color-citron);transition:125ms ease-out}.video-list__item:hover{background-color:var(--color-citron);box-shadow:4px 4px 2px #333;text-decoration-color:var(--color-black);text-decoration-thickness:2px;transform:translate3d(-4px,-4px,2px)}.video-list__item:hover>*{color:var(--color-black)}.video-list__item:focus-visible{background-color:var(--color-citron);outline-color:var(--color-jasper);outline-offset:6px}.video-list__item:focus-visible>*{color:var(--color-black);text-decoration:underline;text-decoration-color:var(--color-jasper);text-decoration-thickness:2px}.video-list__item__thumbnail{aspect-ratio:16/9;background-size:cover;background-position-y:50%;display:block;height:auto;width:100%}.video-list__item__title{color:var(--color-white);font-size:.875rem;font-weight:400;padding:1.125rem 1rem .75rem;text-wrap:balance}.video-list__item__date{color:var(--color-white);font-size:.75rem;margin-top:auto;padding:0 1rem}section{padding:2rem 0}.hero{background-color:var(--color-lavendar);padding:.5rem 0 3rem}.hero .title{filter:drop-shadow(0 2px 0 var(--color-jasper));font-size:3.75rem;letter-spacing:2px;text-shadow:3px 0 0 var(--color-jasper);text-transform:uppercase}.hero__image{filter:drop-shadow(2px 2px 1px #333)}.hero p{font-size:1.5rem}.about h2{font-family:"Chakra Petch",sans-serif;font-size:2.75rem;font-style:italic;line-height:1.1}.about p:first-of-type{font-size:133%;text-wrap:balance}.featured-videos{--flow-space:3rem}.featured-videos p{font-size:1.25rem}@media screen and (min-width:768px){.hero{padding:2rem 0 3.5rem}.hero h1{margin-top:-1.5rem}.hero p{font-size:1.675rem;text-wrap:balance}.hero__inner{display:grid;gap:0 2rem;grid-template-columns:5fr 2fr;grid-template-rows:auto auto}.hero__image{grid-column:2;grid-row:1/3;margin-top:0}.hero .title{align-self:end;filter:drop-shadow(0 3px 0 var(--color-jasper));font-size:calc(5rem + 3vw);line-height:1;text-shadow:4px 0 0 var(--color-jasper)}}@media screen and (min-width:1024px){.hero{padding:2rem 0 4rem}.hero h1{margin-top:-3rem}.hero p{font-size:1.925rem}.hero .title{font-size:7rem}.featured-videos{--flow-space:5rem}}