div#home-page{flex:1}header{margin-bottom:20px;padding:20px 0}header .container{justify-content:space-between;align-items:center;display:flex}header a{color:var(--color-primary);align-items:center;gap:12px;font-weight:700;display:flex}a.navbar-logo{background-image:url(/cocoacomics-logo.svg);background-repeat:no-repeat;background-size:contain;width:176px;height:35px;margin-right:54px;display:inline-block}main{padding-bottom:80px}div.filter-toolbar{margin-bottom:20px}div.filter-toolbar label{gap:8px;display:inline-flex}h1{margin-bottom:30px}.comics-grid{grid-template-columns:repeat(auto-fill,160px);justify-content:center;gap:16px;display:grid}.comic{cursor:pointer;background:#ccc;border-radius:4px;height:240px;transition:all .3s;position:relative;overflow:hidden;box-shadow:0 4px 6px #0000001a}.comic a{height:100%;display:block}.comic img{object-fit:cover}.comic p{color:#fff;background:#000000b3;padding:8px;transition:all .3s;position:absolute;bottom:0;left:0;right:0}.comic:hover{box-shadow:0 0px 20px 4px rgb(from var(--color-primary) r g b / .5);transform:scale(1.02)}span.tag{background-color:var(--color-primary);color:#fff;border-radius:4px;padding:2px 6px;font-size:12px;font-weight:700;position:absolute;top:8px;right:8px;box-shadow:0 2px 4px #0003}@media screen and (min-width:425px){.comics-grid{grid-template-columns:repeat(auto-fill,200px);justify-content:space-between;column-gap:0}.comic{height:300px}}@media screen and (min-width:768px){.comics-grid{row-gap:40px}}