content .overview{ color: black; height: 70vh; display: grid; grid-auto-columns: auto; grid-template-columns:1fr 1fr; grid-row: 0; grid-column: 1/4; align-items: center; justify-self: center; } content .overview .o-l{ padding-right: 6rem; justify-self: end; } content .overview .o-l h1{ font-size: 2.5rem; width: 580px; padding-bottom: 2rem; } content .overview .o-l p{ font-size: 1.1rem; width: 450px; opacity: 0.5; padding-bottom: 2rem; } content .overview .o-r{ color: black; height: 55vh; display: grid; grid-auto-columns: auto; grid-template-columns: 1fr 1fr; grid-row: 0; grid-column: 2/4; align-items: center; justify-self: end; } content .overview .o-r .left div{ width: 450px; padding-bottom: 2rem; } content .overview .o-r .right div{ width: 450px; padding-bottom: 2rem; } content .overview .o-r div img{ width: 2rem; } content .overview .o-r div div{ padding-top: 1rem; } content .overview .o-r div div span{ font-size: 1.5rem; font-weight: bold; } content .overview .o-r div div p{ font-size: 1.1rem; padding-top: 1rem; width: 350px; opacity: 0.5; } @media (max-width: 1318px) { content .overview{ height: 170vh; grid-template-columns:1fr; grid-column: 2/4; padding-top: 5rem; } content .overview .o-l{ padding-right: 0rem; text-align: center; } content .overview .o-l h1{ font-size: 2.5rem; width: 100%; padding-bottom: 2rem; } content .overview .o-l p{ font-size: 1.1rem; width: 100%; opacity: 0.5; padding-bottom: 2rem; } content .overview .o-r { height: 95vh; grid-template-columns: 1fr; grid-column: 1/5; align-items: center; justify-self: start; padding-left: 0rem; } content .overview .o-r div div { padding-top: 1rem; text-align: center; } content .overview .o-r div div p{ width: 100%; } content .overview .o-r .left div{ width: 100%; } content .overview .o-r .right div{ width: 100%; } }