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; } } .new { display: flex; flex-direction: row; gap: 3rem; padding: 2rem; &:not(:last-child) { border-bottom: 1px solid var(--light-green); } h2 { color: var(--light-green); font-weight: 800; font-size: 42px; margin-top: 0; margin-bottom: 0; } .metadata { font-weight: bold; } button { background-color: var(--light-green); color: white; font-family: "Open Sans", serif; border: none; font-size: 18px; font-weight: bold; padding: 5px 10px; margin-left: 1rem; &:hover { cursor: pointer; background-color: var(--light-green-hover); } } & > img { flex: 1; width: 1px; object-fit: cover; } & > div { flex: 2; } }}@media screen and (max-width: 1200px) { section { h1 { font-size: 56px; span { font-size: 42px; } } .new { h2 { font-size: 30px; } } }}@media screen and (max-width: 900px) { section { h1 { font-size: 48px; span { font-size: 36px; } } .new { display: flex; flex-direction: column; } }}@media screen and (max-width: 520px) { section { h1 { line-height: 80%; font-size: 36px; span { font-size: 25px; } } .new { font-size: 25px; button { display: block; margin-top: 1rem; } } }}