.card{position:relative;width:100%}.card:hover{cursor:pointer}.mainImage{display:flex;width:100%;object-fit:cover;object-position:left top}.info{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;padding:20px;flex-wrap:wrap;flex-direction:column;justify-content:flex-end;font-family:Montserrat,sans-serif;background:#0000;color:#0000}.info:hover{background:#000000bf;color:#fff}.info h1{font-size:2rem}.info p{font-size:1rem;padding-top:1rem}@media all and (min-width: 668px){.card{width:50%}}@media all and (min-width: 1024px){.card{width:25%}}.cardList{display:flex;flex-wrap:wrap;background:#000}svg{width:30px;transition:margin-right .2s ease-in-out}.detailContainer{position:relative;min-height:100vh;display:flex;flex-direction:column;padding:30px;justify-content:space-between;background:linear-gradient(to bottom,#0000 70%,#000)}.backgroundImage{position:absolute;display:flex;top:0;left:0;width:100%;height:100%;z-index:-1;object-fit:cover;object-position:left top}.arrowTitle{padding-left:5px;transition:transform .2s ease-in-out;color:#fff;font-family:Montserrat,sans-serif;font-size:1.2rem}.arrowTitle:hover{transform:translate(5px)}.arrow{position:relative;display:inline-flex;filter:drop-shadow(2px 3px 4px rgb(0 0 0 / .5))}.detailImage{border:5px solid white;width:200px}.details{color:#fff;font-family:Montserrat,sans-serif}.title{margin:20px 0;font-size:1.5rem;text-shadow:1px 1px #4d4d4d}.overview{font-size:1rem}.rating{display:inline-block;background-color:#fff;color:#000;padding:0 10px;overflow-wrap:anywhere}@media all and (min-width: 668px){.summary{display:flex}.detailImage{width:250px}.details{align-self:end;max-width:400px;margin:20px}.detailContainer{padding:50px}}@media all and (min-width: 1024px){.detailImage{width:350px}}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif}*{margin:0;padding:0;box-sizing:border-box}