/*body {
    background-color: #000;
    font: 1.1em;
}*/

img {
    width: 100%;
    max-width: 100%;
    display: block;
}

figure {
    margin: 0;
    display: grid;
    grid-template-rows: 1fr auto;
    margin-bottom: 10px;
    break-inside: avoid;
}

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

    figure a {
        color: black;
        text-decoration: none;
        font-size: 16px;
        background-color: #d4d8e2;
        padding: 4px 20px;
        border-radius: 8px;
        box-shadow: 2px 2px 2px #7d858e;
    }

    figure a:hover {
        color: #FFF;
        background-color: #000;
     
        box-shadow: 2px 2px 2px #d4d8e2;
    }

figcaption {
    grid-row: 2;
    grid-column: 1;
    background-color: rgba(255,255,255,.7);
    padding:15px;
    justify-self: start;
}

.containergride {
    column-count: 4;
    column-gap: 10px;
}


@media (max-width:1170px) {
    .containergride {
        column-count: 3;
        column-gap: 10px;
    }
}

@media (max-width:991px) {
    .containergride {
        column-count: 2;
        column-gap: 10px;
    }
}

@media (max-width:700px) {
    .containergride {
        column-count: 1;
        column-gap: 10px;
    }
}