@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 { transform: translateY(4rem); position: relative; } #results::after { position: absolute; content: ''; top: 0; display: block; padding-bottom: 4rem; } } .card-member { background: var(--white); border: .1rem solid #70707030; padding: 3rem; transition: .3s ease-in-out; } .card-member:hover { transform: scale(1.05); } .memberCardBody { display: flex; flex-direction: column; justify-content: center; align-items: center; } .card-member img,.card-member svg { width: auto; max-width: 7rem; } .card-member .details { text-align: center; margin-top: 0; } @media screen and (min-width: 36em) { } @media screen and (min-width: 48em) { .card-member .details { margin-top: 2.5rem; } .card-member img,.card-member svg { width: 12.5rem; max-width: 12.5rem; } } .card-member .details h3 { display: inline; font-size: 1.6rem; color: var(--text-main); } .card-member .details small { display: block; margin-top: 1rem; font-size: 1.4rem; font-weight: 200; color: var(--text-lighter); } @media screen and (max-width: 47.99em) { .memberCardBody { flex-direction: row; justify-content: space-between; } .memberCardBody .details { width: 100%; } } #results { position: relative; } #new-member { position: absolute; right: 0; top: 0; transform: translateY(-130%); } @media screen and (max-width: 21em) { h1.h-main { visibility: hidden; } }