69 lines
1.4 KiB
CSS
69 lines
1.4 KiB
CSS
@charset "UTF-8";
|
|
.mod-articles-item {
|
|
flex-direction: column;
|
|
display: flex;
|
|
}
|
|
|
|
.mod-articles-item .mod-articles-item-content {
|
|
order: 1;
|
|
}
|
|
|
|
.mod-articles-image {
|
|
margin-bottom: .5rem;
|
|
}
|
|
|
|
@supports (container-type: inline-size) {
|
|
div:has( > .mod-articles-grid), section:has( > .mod-articles-grid) {
|
|
container-type: inline-size;
|
|
}
|
|
}
|
|
|
|
.grid-cols-2 {
|
|
--grid-column-count: 2;
|
|
}
|
|
|
|
.grid-cols-3 {
|
|
--grid-column-count: 3;
|
|
}
|
|
|
|
.grid-cols-4 {
|
|
--grid-column-count: 4;
|
|
}
|
|
|
|
.mod-articles-grid {
|
|
--grid-layout-gap: 2rem;
|
|
--grid-item--min-width: 100px;
|
|
--gap-count: calc(var(--grid-column-count) - 1);
|
|
--total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
|
|
--grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));
|
|
grid-gap: var(--grid-layout-gap);
|
|
grid-template-columns: 1fr;
|
|
display: grid;
|
|
}
|
|
|
|
@container (width >= 768px) {
|
|
.mod-articles-grid {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
}
|
|
|
|
@container (width >= 992px) {
|
|
.mod-articles-grid {
|
|
grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
|
|
}
|
|
}
|
|
|
|
@supports not (container-type: inline-size) {
|
|
@media (width >= 768px) {
|
|
.mod-articles-grid {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
}
|
|
|
|
@media (width >= 992px) {
|
|
.mod-articles-grid {
|
|
grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
|
|
}
|
|
}
|
|
}
|