:root {
    --gutter: 10px;
    --wrapper: calc(100vw - ( 2 * var(--gutter)));
    --ratioA: 1;
    --ratioB: 1;
    --noOfColumns: 3;
    --noOfGutters: calc(var(--noOfColumns) - 1);
    --factor: calc(var(--ratioB) / var(--ratioA));
    --rh: calc(( (var(--wrapper) - (var(--noOfGutters) * var(--gutter)))
    / var(--noOfColumns)) * var(--factor));
}

@media (min-width: 576px) {
    :root {
        --wrapper: calc(540px - 30px);
    }
}

@media (min-width: 768px) {
    :root {
        --wrapper: calc(720px - 30px);
        --gutter: 10px;
        --noOfColumns: 5;
    }
}

@media (min-width: 992px) {
    :root {
        --wrapper: calc(960px - 30px);
    }
}

@media (min-width: 1200px) {
    :root {
        --wrapper: calc(1140px - 30px);
    }
}

@media (min-width: 1450px) {
    :root {
        --wrapper: calc(1352px - 30px);
    }
}


.grid {
    max-width: var(--wrapper);
    display: grid;
    grid-template-columns: repeat(var(--noOfColumns), minmax(0, 1fr));
    grid-auto-flow: dense;
    grid-auto-rows: minmax(var(--rh), auto);
    grid-gap: var(--gutter);
    margin: var(--gutter) auto;
}

.grid-item {
    position: relative;
    display: block;
}

.grid-item.sm-square {
    grid-row: span 1;
    grid-column: span 1;
}

.grid-item.lg-square {
    grid-row: span 2;
    grid-column: span 2;
}

.grid-item.h-rect {
    grid-row: span 1;
    grid-column: span 3;
}

.grid-item.v-rect {
    grid-row: span 2;
    grid-column: span 1;
}

@media (max-width: 767px) {
    .grid-item.v-rect {
        grid-row: span 2;
        grid-column: span 2
    }
}

.grid-item .caption {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 15px 20px;
    color: #000;
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
    font-size: 1.75em;
    z-index: 9;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}

.grid-item:hover .caption {
    color: #fff!important;
}


@media (max-width: 767px) {
    .grid-item .caption {
        padding: 10px 15px;
        font-size: 1.25em;
    }
}