/* # Split */ section.split { display: grid; grid-template-columns: repeat(2, 1fr); margin: 10svh 0; } section.split.center { justify-items: center; } section.split > div { grid-row: 1; display: flex; align-items: center; flex-direction: column; justify-content: center; } section.split.reverse > div:last-child { grid-column: 1; } section.split.reverse > div:first-child { grid-column: 2; } /* ## Text */ section.split .text { width: 70%; display: flex; align-items: baseline; flex-direction: column; } section.split.reverse .text { align-items: end; justify-self: end; text-align: right; } /* ## Buttons */ section.split .buttons { display: flex; gap: var(--padding); margin-top: var(--padding); } /* # Size queries */ @media (max-width: 950px) { section.split { display: flex; margin: 5svh 0; gap: var(--padding); flex-direction: column; } section.split .text { width: 100%; } section.split .buttons { width: 100%; flex-direction: column; gap: calc(var(--padding) / 2); } }