/*
 *                          >>>> Masonry Styles <<<<
 *
 * This stylesheet creates a pinterest-like layout, intended for images. This
 * is currently used for the cat-pictures page.
 *
 * The parent div with the masonry must have the class ".masonry".
 */
.masonry {
    column-gap: 10px;
    margin: 10px;
}
@media (min-width: 1100px) {
    .masonry {
        column-count: 4;
    }
}
@media (max-width: 1099px) and (min-width: 800px) {
    .masonry {
        column-count: 3;
    }
}
@media (max-width: 799px) and (min-width: 400px) {
    .masonry {
        column-count: 2;
    }
}
@media (max-width: 399px) {
    .masonry {
        column-count: 1;
    }
}
.masonry .masonry-grid {
    display: grid;
    grid-template-rows: 1fr auto;
    margin-bottom: 10px;
    break-inside: avoid;
}
.masonry .masonry-image {
    display: block;
    max-width: 100%;
    border-radius: 30px;
    grid-row: 1 / -1;
    grid-column: 1;
    animation: float-rev 1s ease-in-out;
}
@media (min-width: 800px) {
    /* Doesn't do hover effect if there are fewer than 3 columns */
    .masonry .masonry-image:hover {
        box-shadow: 0px 10px 60px -10px;
        transform: translatey(-10px);
        cursor: pointer;
        animation: float 1s ease-in-out;
    }
}
@keyframes float {
    0% {
        box-shadow: 0px 10px 60px -10px rgba(0,0,0,0);
        transform: translatey(0px);
    }
    100% {
        box-shadow: 0px 10px 60px -10px rgba(0,0,0,1);
        transform: translatey(-10px);
    }
}
@keyframes float-rev {
    0% {
        box-shadow: 0px 10px 60px -10px rgba(0,0,0,1);
        transform: translatey(-10px);
    }
    100% {
        box-shadow: 0px 10px 60px -10px rgba(0,0,0,0);
        transform: translatey(0px);
    }
}