1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
@use "../mixins" as mix;
%grid {
display: grid;
align-items: center;
grid-template-columns:
minmax(0, 1fr) min(calc(100vw - calc(var(--spacing-md) * 2)), 80ch)
var(--column-3, minmax(0, 1fr));
column-gap: var(--grid-gap, var(--spacing-md));
@include mix.media("screen") {
@include mix.dimensions("md") {
grid-template-columns:
minmax(0, 1fr) clamp(60ch, 60vw, 80ch)
var(--column-3, minmax(0, 3fr));
column-gap: var(--grid-gap, var(--spacing-xl));
}
@include mix.dimensions("lg") {
grid-template-columns:
minmax(0, 1fr) clamp(47ch, 47vw, 80ch)
var(--column-3, minmax(0, 1fr));
}
}
}
|
