section { border-top: 1px solid var(--light-green); margin-bottom: 5rem; h1 { font-weight: 800; font-size: 80px; text-transform: uppercase; margin-bottom: 0; line-height: 4rem; span { font-weight: 300; font-size: 60px; } } .wrapper { margin-top: 5rem; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 3rem; width: 100%; .item { margin-left: 1rem; margin-right: 1rem; position: relative; border: 1px solid var(--dark-green); height: 10rem; display: flex; justify-content: center; align-items: center; flex-direction: column; h2 { color: var(--light-green); font-size: 30px; margin: 0; text-align: center; } span { color: var(--light-green); font-weight: lighter; font-size: 20px; text-align: center; } &:before { content: ""; position: absolute; width: 100%; height: 100%; transition: 300ms background-color; background: rgba(255, 255, 255, 0); } .download-icon-wrapper { position: absolute; display: flex; height: 100%; opacity: 0; width: 100%; text-align: center; align-items: center; justify-content: center; transition: 300ms all; img { height: 60%; } } &:hover { .download-icon-wrapper { opacity: 1; } &:before { background: rgba(255, 255, 255, 0.6); } } } }}@media screen and (max-width: 1200px) { section { h1 { font-size: 56px; span { font-size: 42px; } } .wrapper { gap: 2rem; } }}@media screen and (max-width: 900px) { section { h1 { font-size: 48px; span { font-size: 36px; } } .wrapper { grid-template-columns: 1fr 1fr; gap: 3rem; } }}@media screen and (max-width: 520px) { section { h1 { line-height: 80%; font-size: 36px; span { font-size: 25px; } } .wrapper { grid-template-columns: 1fr 1fr; gap: 1rem; } }}@media screen and (max-width: 420px) { section { .wrapper { grid-template-columns: 1fr; } }}