umami/src/components/layout/Grid.module.css
2024-05-25 09:31:38 -07:00

72 lines
1,016 B
CSS

.grid {
display: grid;
}
.row {
display: grid;
grid-template-columns: repeat(6, 1fr);
border-top: 1px solid var(--base300);
}
.row.compare {
grid-template-columns: max-content 1fr 1fr;
}
.col {
padding: 20px;
min-height: 430px;
border-inline-start: 1px solid var(--base300);
}
.col:first-child {
border-inline-start: 0;
padding-inline-start: 0;
}
.col:last-child {
padding-inline-end: 0;
}
.col.two {
grid-column: span 3;
}
.col.three {
grid-column: span 2;
}
.col.two-one:first-child {
grid-column: span 4;
}
.col.two-one:last-child {
grid-column: span 2;
}
.col.one-two:first-child {
grid-column: span 2;
}
.col.one-two:last-child {
grid-column: span 4;
}
@media only screen and (max-width: 992px) {
.row {
border: 0;
}
.row > .col {
border-top: 1px solid var(--base300);
border-inline-start: 0;
border-inline-end: 0;
padding: 20px 0;
}
.col.two,
.col.three,
.col.one-two,
.col.two-one {
grid-column: span 6 !important;
}
}