/**
 * https://gomakethings.com/how-to-create-a-responsive-grid-system-with-css-grid/
 *
 * @format
 */

/*
GRID SYSTEM

Variables: 
--ev-event-grid-column-gap
--ev-event-grid-row-gap
--ev-event-grid-column-gap-large
--ev-event-grid-row-gap-large
 
--ev-event-grid-fill:
--ev-event-grid-max-columns 
--ev-event-grid-min-column-width
 
 */

@media (min-width: 40em) {
    /* The grid system */
    .ev-grid {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: 1fr auto;
        column-gap: var(--ev-event-grid-column-gap, 1em);
        row-gap: var(--ev-event-grid-row-gap, 1em);
    }
}

@media (max-width: 60em) {
    .ev-grid {
        grid-template-columns: auto;
    }
}

/* Column classes */
.grid-fourth {
    grid-column: auto / span 3;
}

.grid-third {
    grid-column: auto / span 4;
}

.grid-half {
    grid-column: auto / span 6;
}

.grid-two-thirds {
    grid-column: auto / span 8;
}

.grid-three-fourths {
    grid-column: auto / span 9;
}
.grid-full {
    grid-column: auto / span 12;
}

/* Offset classes */
[class*='grid-start-'] {
    grid-row-start: 1;
}

.grid-start-first {
    grid-column-start: 1;
}

.grid-start-fourth {
    grid-column-start: 4;
}

.grid-start-third {
    grid-column-start: 5;
}

.grid-start-half {
    grid-column-start: 7;
}

.grid-start-two-thirds {
    grid-column-start: 9;
}

.grid-start-three-fourths {
    grid-column-start: 10;
}

/* Gap classes */
.grid-gap-large {
    column-gap: var(--ev-event-grid-column-gap-large, 1.1875em);
    row-gap: var(--ev-event-grid-row-gap-large, 1.1875em);
}

.grid-no-gap {
    column-gap: 0;
    row-gap: 0;
}

/* Auto size grid */
/* This tells the grid to automatically fit columns into the row. */
/* But, it sets some restrictions on the minimum and maximum size, */
/* preventing them from being less than 20 em (change that to whatever you want).*/
.ev-auto-grid {
    /* calculations, do not touch */
    --grid-col-size-calc: calc(
        (
                100% - var(--ev-event-grid-row-gap, 1em) *
                    var(--ev-event-grid-max-columns, 3)
            ) / var(--ev-event-grid-max-columns, 3)
    );
    --grid-col-min-size-calc: min(
        100%,
        max(
            var(--ev-event-grid-min-column-width, 20em),
            var(--grid-col-size-calc)
        )
    );

    display: grid;
    column-gap: var(--ev-event-grid-column-gap, 1em);
    row-gap: var(--ev-event-grid-row-gap, 1em);

    /* Here is where the magic happens. */
    grid-template-columns: repeat(
        var(--ev-event-grid-fill, auto-fill),
        minmax(min(100%, var(--ev-event-grid-min-column-width, 20em)), 1fr)
    );
}