40 lines
828 B
CSS
40 lines
828 B
CSS
.container {
|
|
margin-left: calc(-1 * var(--spacer) / 1.5);
|
|
margin-right: calc(-1 * var(--spacer) / 1.5);
|
|
padding: calc(var(--spacer) / 1.5) calc(var(--spacer) / 1.5)
|
|
calc(var(--spacer) / 2) calc(var(--spacer) / 1.5);
|
|
}
|
|
|
|
@media (min-width: 40rem) {
|
|
.container {
|
|
padding-left: var(--spacer);
|
|
padding-right: var(--spacer);
|
|
margin-left: calc(-1 * var(--spacer));
|
|
margin-right: calc(-1 * var(--spacer));
|
|
}
|
|
}
|
|
|
|
.section {
|
|
composes: container;
|
|
|
|
border-top: 1px solid var(--border-color);
|
|
position: relative;
|
|
}
|
|
|
|
.section.highlight {
|
|
background: var(--background-highlight);
|
|
}
|
|
|
|
.section:first-child {
|
|
padding-top: 0;
|
|
border-top: 0;
|
|
}
|
|
|
|
.grid {
|
|
display: grid;
|
|
gap: calc(var(--spacer) / 2);
|
|
grid-template-columns:
|
|
[full-start] minmax(13rem, 1fr) [break] minmax(7rem, 1fr)
|
|
[full-end];
|
|
}
|