* {
    box-sizing: border-box;
    max-width: 100%;
    height: auto;
}

.grid {
    display: grid;
    grid-template-rows: max-content;
}


@media(min-width: 58rem){
    .grid.two-column-small {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 48rem){
    .grid.four-column {
        grid-template-columns: 1fr 1fr 1fr 1fr;
        place-items: center;
    }

    .grid.three-column {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .grid.five-column {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    }
    
    .grid.two-column {
        grid-template-columns: 1fr 1fr;
    }

    .grid.two-row {
        grid-template-rows: 1fr 1fr;
    }

    .grid-item {
        position: relative;
        align-self: first baseline;
        box-sizing: border-box;
    }

    .grid-item-middle {
        position: relative;
        align-self: center;
        box-sizing: border-box;
    }
}

.grid-item-centre {
    text-align: center;
    justify-self: center;
}

.grid.add-gutters {
    /*defines gaps between columns*/
    grid-column-gap: 2.5rem;
    /*defines gaps between rows*/
    grid-row-gap: 2.5rem;
}