*,:before,:after{box-sizing:border-box}html{--c1: #679bc2;--c2: #7fa5c2;--c3: #f2f2f2;font-family:Outfit,sans-serif}html body{background:var(--c3);margin:0;width:80%;max-width:100rem;height:100vh;margin-inline:auto;padding:0}.container .cards{grid-template-columns:repeat(3,1fr);gap:3rem;display:grid}.container .cards .card{border:var(--c1) solid 3px;background:var(--c2);border-radius:1rem;margin:1rem;padding:1rem}.container .cards .card a{color:inherit;grid-template-rows:repeat(5,1fr);grid-template-columns:1fr 1fr;text-decoration:none;display:grid}.container .cards .card a .c-title{text-align:center;grid-column:span 2;margin:0}.container .cards .card a .c-rating{flex-direction:row;grid-column:span 2;align-items:start;gap:3rem;display:flex}.container .cards .card a .c-desc{grid-area:span 2 / span 2}.container .cards .card a .c-date{text-align:end;grid-area:5 / 2;margin:2rem 0 0}.container .cards .card:hover{box-shadow:.4rem .4rem .6rem var(--c2)}