.grid { display: grid; --repeat: 3; grid-template-columns: repeat(var(--repeat), 1fr); justify-content: center; align-items: flex-start; gap: 40px; margin: 40px 0; } .grid > * { min-width: 0; min-height: 0; width: 100%; margin: 0 !important; } @media (max-width: 750px) { .grid { --repeat: 2; } } @media (max-width: 500px) { .grid { --repeat: 1; } } .grid[data-style=square] { align-items: center; } .grid[data-style=square] > * { aspect-ratio: 1/1; } .grid[data-style=square] img { aspect-ratio: 1/1; object-fit: cover; max-width: unset; max-height: unset; } .grid > :where(h1, h2, h3, h4, h5, h6) { display: none; } /*# sourceMappingURL=grid.css.map */