/* Grid extension, https://github.com/bauermartincom/yellow-grid */

/* Grid container */

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
    align-items: stretch;
    gap: 1.5rem;
    margin: 1.5rem 0;
}
.grid > * {
    min-width: 0;
}
.grid img,
.grid video,
.grid iframe {
    max-width: 100%;
}

/* Grid columns */
.grid-columns-auto {
    grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}
.grid-columns-auto-narrow {
    grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
}
.grid-columns-auto-wide {
    grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
}
.grid-columns-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-columns-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid-columns-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.grid-columns-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.grid-columns-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
.grid-columns-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
.grid-columns-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
.grid-columns-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

/* Grid gap */

.grid-gap-none { gap: 0; }
.grid-gap-small { gap: 0.75rem; }
.grid-gap-medium { gap: 1.5rem; }
.grid-gap-large { gap: 2.5rem; }
.grid-gap-xlarge { gap: 4rem; }

/* Grid alignment */

.grid-align-top { align-items: start; }
.grid-align-middle { align-items: center; }
.grid-align-bottom { align-items: end; }
.grid-align-stretch { align-items: stretch; }

/* Grid cells */

.grid-cell {
    min-width: 0;
}
.grid-cell > :first-child {
    margin-top: 0;
}
.grid-cell > :last-child {
    margin-bottom: 0;
}
.grid > .grid-align-top { align-self: start; }
.grid > .grid-align-middle { align-self: center; }
.grid > .grid-align-bottom { align-self: end; }
.grid > .grid-align-stretch { align-self: stretch; }
.grid > .grid-span-1 { grid-column: span 1; }
.grid > .grid-span-2 { grid-column: span 2; }
.grid > .grid-span-3 { grid-column: span 3; }
.grid > .grid-span-4 { grid-column: span 4; }
.grid > .grid-span-5 { grid-column: span 5; }
.grid > .grid-span-6 { grid-column: span 6; }
.grid > .grid-span-7 { grid-column: span 7; }
.grid > .grid-span-8 { grid-column: span 8; }
.grid > .grid-span-9 { grid-column: span 9; }
.grid > .grid-span-10 { grid-column: span 10; }
.grid > .grid-span-11 { grid-column: span 11; }
.grid > .grid-span-12 { grid-column: span 12; }
.grid > .grid-span-full { grid-column: 1 / -1; }

/* Optional styles */

.grid-boxed > * {
    padding: 1rem;
    border: 1px solid var(--border, #bbb);
    border-radius: 3px;
}
.grid-center > * {
    text-align: center;
}

/* Small screens */

@media screen and (max-width: 60em) {
    .grid:not(.grid-keep).grid-columns-5,
    .grid:not(.grid-keep).grid-columns-6,
    .grid:not(.grid-keep).grid-columns-7,
    .grid:not(.grid-keep).grid-columns-8,
    .grid:not(.grid-keep).grid-columns-9,
    .grid:not(.grid-keep).grid-columns-10,
    .grid:not(.grid-keep).grid-columns-11,
    .grid:not(.grid-keep).grid-columns-12 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media screen and (max-width: 48em) {
    .grid:not(.grid-keep).grid-columns-3,
    .grid:not(.grid-keep).grid-columns-4,
    .grid:not(.grid-keep).grid-columns-5,
    .grid:not(.grid-keep).grid-columns-6,
    .grid:not(.grid-keep).grid-columns-7,
    .grid:not(.grid-keep).grid-columns-8,
    .grid:not(.grid-keep).grid-columns-9,
    .grid:not(.grid-keep).grid-columns-10,
    .grid:not(.grid-keep).grid-columns-11,
    .grid:not(.grid-keep).grid-columns-12 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media screen and (max-width: 32em) {
    .grid:not(.grid-keep) {
        grid-template-columns: minmax(0, 1fr);
    }
    .grid:not(.grid-keep) > * {
        grid-column: auto;
    }
}