img {
    max-width: 100%;
    display: block;
    border-radius: 5px;
}

figure {
    width: 100%;
    margin: 0;
    display: grid;
    grid-template-rows: 3fr auto;
    margin-bottom: 10px;
    break-inside: avoid;
    grid-column: span 3;
    grid-row: span 3;
}

figure>img {
    grid-row: 1 / -1;
    grid-column: span 3;
    grid-row: span 3;
}

figure a {
    color: black;
    text-decoration: none;
}

.mediaContainer {
    column-count: 3;
    column-gap: 10px;
}


@media (max-width: 768px) {
    .mediaContainer {
        column-count: 2;
        /* For screens smaller than 768px */
    }
}

@media (max-width: 576px) {
    .mediaContainer {
        column-count: 1;
        /* For screens smaller than 576px */
    }
}

.mediaContainer .image-container .media-link {
    border: 1px solid #f4f4f4;
    overflow: hidden;
    cursor: pointer;
}

.mediaContainer .image-container .media-link:hover img {
    transform: scale(1.1);
}