* {
    box-sizing: border-box;
}

body {
    margin: 0;
}

h1, h2, h3, h4, h5, h6, p {
    margin: 0;
}

img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Padding */
.pad-small {
    padding: 1rem;
}

/* Margins */


.mar-bot-medium {
    margin-bottom: 2rem;
}

.mar-top-medium {
    margin-top: 2rem;
}

/* Larger than Mobile */
@media screen and (min-width: 600px) {
    .mar-bot-medium {
        margin-bottom: 3rem;
    }

    .mar-top-medium {
        margin-top: 5rem;
    }
}

/* Text */
.text-mono {
    font-family: "Roboto Mono", monospace;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.text-sans {
    font-family: "Rubik", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    line-height: 1em;
}


.text-align-right {
    text-align: right;
}

.text-large,
.text-super {
    font-size: 44px;
}

.text-small,
.text-medium {
    font-size: 20px;
}

/* Larger than Mobile */
@media screen and (min-width: 600px) {
    .text-small {
        font-size: 20px;
    }

    .text-medium {
        font-size: 32px;
    }

    .text-large {
        font-size: 68px;
    }

    .text-super {
        font-size: 88px;
    }
}

/* Grid */
.grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

/* Larger than Mobile */
@media screen and (min-width: 600px) {
    .grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* Header */
.header {
    grid-column: 1/-1;
}

/* Columns */

.column-small,
.column-medium,
.column-large {
    grid-column: span 1;
}

.column-full {
    grid-column: 1/-1;
}

.row-double {
    grid-row: span 2;
}

/* Larger than Mobile */
@media screen and (min-width: 600px) {
    .column-small {
        grid-column: span 2;
    }

    .column-medium {
        grid-column: span 3;
    }

    .column-large {
        grid-column: span 4;
    }

    .column-center {
        grid-column: 2/-2;
    }
}


@media screen and (max-width: 600px) {
    .hide-mobile {
        display: none;
    }

    .header {
        gap: 0;
    }

    .row-2 {
        grid-row: 2;
    }
}