.videos-grid{margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);-moz-column-gap:30px;column-gap:30px;row-gap:30px}.videos-grid li{list-style:none;margin:0;padding:0}.videos-grid li a{display:flex;flex-direction:column;position:relative;box-shadow:0 2px 5px rgb(0 0 0 / .2);transition:all 0.5s;overflow:hidden;background-color:var(--body-black)}.videos-grid li a img{width:100%;max-width:100%;aspect-ratio:3/2;-o-object-fit:cover;object-fit:cover;-o-object-position:top;object-position:top;transition:all 0.5s}.videos-grid li a div{position:absolute;bottom:0;left:0;padding:1em;background-color:var(--brand-yellow);color:var(--body-black);height:90px;overflow-y:hidden;transition:all 0.5s;z-index:3;width:100%;box-shadow:0 -20px 50px rgb(0 0 0 / .15)}.videos-grid li a>span{position:absolute;left:0;bottom:-100%;z-index:1;background-color:var(--brand-grey);color:#fff;text-transform:uppercase;font-size:1rem;font-weight:600;padding:2em 1em;display:block;text-align:center;width:100%;transition:all 0.5s}.videos-grid li a:hover{box-shadow:0 5px 15px rgb(0 0 0 / .25)}.videos-grid li a:hover img{opacity:.6;transform:scale(1.15)}.videos-grid li a:hover>div{bottom:-50%}.videos-grid li a:hover>span{bottom:0}.videos-grid li h4{margin-bottom:10px;font-weight:600}@media (max-width:1199px){.videos-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:899px){.videos-grid{grid-template-columns:repeat(1,1fr);max-width:440px;margin:auto}}