.guides { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 1.5rem; padding: 4rem 0 6rem 0; h4 { grid-column: 1/5; margin: 1.5rem 0 0 0; } .guide { display: inline-block; background: var(--b-color); border: .15rem solid var(--w-color); padding: 0; a { display: inline-block; padding: 1rem 2rem 1rem 1.5rem; h5 { color: var(--f-color); font-size: 1.6rem; line-height: 1.8rem; } &:hover { background: #111111; } } } } @media only screen and (max-width: 768px) { .guides { grid-template-columns: 1fr 1fr; grid-gap: 1rem; padding: 4rem 1rem; h4 { grid-column: 1/3; } .guide a { padding: .5rem 1rem; h5 { font-size: 1.2rem; line-height: 1.5rem; } } } }