.grid-row {
  display: grid;
}
@media screen and (width < 700px) {
    .grid-row {
        margin-bottom: 0;
    }
}

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

@media screen and (width < 700px) {
    .columns-1,
    .columns-2,
    .columns-3 { 
        grid-template-columns: 1fr; 
    }
}

.columns-1 .grid-item img {
    aspect-ratio: 16/9;
}

.columns-2 .grid-item img {
    aspect-ratio: 1;
}

.columns-3 .grid-item img {
    aspect-ratio: 9/16;
}

.grid-item {
    color: inherit;
    text-decoration: none;
    margin-bottom: 2rem;
}
.grid-item:hover figcaption {
    transform: translateY(0.7rem);
    transition: transform 0.2s ease;
}

.grid-item figcaption {
    padding: 0.3rem 0.3rem 0 0.3rem;
    transition: transform 0.2s ease;
}

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