@media screen and (min-width: 36em) and (max-width: 48em) { .body-wrap { display: grid; grid-template-columns: 2fr 3fr; grid-auto-columns: 1fr; gap: 5rem; grid-template-areas: "filters results"; } }    #results { position: relative; } .card-project { border: .1rem solid var(--border-secondary); transition: .3s ease-in-out; } .card-project:hover { transform: scale(1.05); } .card-project a { height: 100%; } .card-project .zoombox .ratio-content { display: flex; justify-content: center; align-items: center; background-color: #333333;  } .card-project .zoombox .logo { padding: 2rem; filter: invert(62%) sepia(27%) saturate(0%) hue-rotate(258deg) brightness(96%) contrast(93%); } .card-project .details { display: flex; justify-content: space-between; height: 100%; padding: .75rem 1.25rem 1.5rem; } .card-project .details .title { font-size: 1.4rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; } .card-project .details .categ { font-size: 1.2rem; font-weight: 200; } .card-project .details .text { display: flex; flex-direction: column; justify-content: space-between; margin-right: 1rem; } .card-project .details .comments { display: flex; justify-content: center; justify-self: first baseline; height: max-content; margin-top: auto; color: var(--color-main); font-weight: 200; } .card-project .details .comments small { margin-right: .5rem; } .form-check { font-size: 1.4rem; color: var(--text-main); } .form-check-input { border: 1px solid var(--text-lighter) } @media screen and (min-width: 62em) { .results-wrap { grid-template-columns: repeat(2,1fr); } } @media screen and (min-width: 75em) { .results-wrap { grid-template-columns: repeat(3,1fr); } } #new-project { position: absolute; right: 0; top: 0; transform: translateY(-130%); }