website/public/assets/css/snippets/split.css

50 lines
No EOL
730 B
CSS

/* # 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);
}