.grid {
    display: grid;
    grid-template-columns: repeat(23, 1fr);
    padding: 1rem;
    margin-top: 15vh;
}

.grid.home,
.grid.lense {
    grid-auto-rows: calc(100vw/25 * 20);
}

.grid.project {
    grid-auto-rows: calc(100vw/25 * 30);
}

.grid.trope {
    grid-auto-rows: calc(100vw/25 * 20);
}

/* Desktop */
@media only screen and (min-width: 48rem) {
    .grid {
        grid-template-columns: repeat(55, 1fr);
    }

    .grid.home,
    .grid.lense {
        grid-auto-rows: calc(100vw/55 * 18);
    }

    .grid.project {
        grid-auto-rows: calc(100vw/55 * 36);
    }
    
    .grid.trope {
        grid-auto-rows: calc(100vw/55 * 24);
    }

    .project {
        position: relative;
    }
}