.hero { background-color: var(--color-beige-light); --padding-vertical: calc(var(--space-m) / 1.5); display: grid; grid-template-columns: 1.6fr 3fr; column-gap: calc(var(--space-m) / 1.5); } .hero__text { position: relative; } .hero__text h2 { font-size: var(--font-size-xl); width: 100%; margin-bottom: var(--padding-vertical); } .hero__text h2.big { font-size: var(--font-size-xxl); } .hero__text h3 { color: var(--color-season); font-size: var(--font-size-h2); } .hero__text h3:nth-child(odd) { text-align: end; } .hero__text p:not(:last-of-type) { margin-bottom: 1rem; } .hero__text p:first-of-type { margin-top: var(--padding-vertical); } .hero__link { position: absolute; bottom: 0; font-weight: bold; } .hero__link::before { content: "→"; margin-right: 1rem; } @media screen and (max-width: 800px) { .hero__text h2 { text-align: center; } .hero__text h2.big { font-size: calc(var(--font-size-xxl) / 1.2); text-align: left; } .hero__text p:first-of-type { margin-top: 1rem; } .hero__link { position: relative; display: block; margin: 1rem 0; } .hero { border-bottom: none !important; } }