:root {
    --gap-lg: 20px;
    --gap-md: 15px;
    --gap-sm: 10px;
    --row-min: 80px;
}

.grid {
    display: grid;
    width: 100%;
    box-sizing: border-box;
    gap: var(--gap-lg);
    grid-auto-rows: minmax(var(--row-min), auto);
}

.grid-2-mobile {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap-lg);
}

.grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }

.row-1 { grid-row: span 1; }
.row-2 { grid-row: span 2; }
.row-3 { grid-row: span 3; }
.row-4 { grid-row: span 4; }
.row-5 { grid-row: span 5; }
.row-6 { grid-row: span 6; }

.page {
    width: 100%;
    max-width: 1200px;
    margin: auto;
    padding: 20px;

    display: grid;
    row-gap: var(--gap-lg);
    word-break: break-word;
}

.page.no-bottom {
    padding-bottom: 0px;
}

.page.no-top {
    padding-top: 0px;
}

.flex-center-children {
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center; 
    height: 100%;
}

.flex-center-children p,
.flex-center-children h1,
.flex-center-children h2,
.flex-center-children h3 {
    text-align: inherit;
}

@media (max-width: 1000px) {

    .grid {
        gap: var(--gap-md);
    }

    .grid-4,
    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .col-3,
    .col-4 {
        grid-column: 1 / -1;
    }
    
    .col-full { grid-column: 1 / -1; }
}

@media (max-width: 700px) {

    .grid-4,
    .grid-3 {
        grid-template-columns: 1fr;
    }

    .grid-2-mobile {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-2-mobile .col-full {
        grid-column: 1 / -1;
    }
}