:root {
    --masonry-grid-gap: var(--space-sm);
    --masonry-col-auto-size: 280px
}

.masonry__loader {
    display: none
}

.masonry__list {
    display: flex;
    flex-wrap: wrap;
    margin-right: calc(-1 * var(--masonry-grid-gap));
    margin-bottom: calc(-1 * var(--masonry-grid-gap))
}

.masonry__item {
    display: inline-block;
    width: var(--masonry-col-auto-size);
    margin-right: var(--masonry-grid-gap);
    margin-bottom: var(--masonry-grid-gap)
}

.masonry {
    position: relative
}

.masonry__loader {
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0
}

.masonry__list {
    opacity: 0;
    transition: opacity .4s
}

.masonry--loaded .masonry__loader {
    display: none
}

.masonry--loaded .masonry__list {
    opacity: 1
}

@supports(flex-basis:0px) {
    .masonry__list {
        flex-direction: column
    }

    .masonry__item {
        flex-basis: 0
    }
}

.card-v9 {
    display: block;
    position: relative;
    z-index: 1;
    text-decoration: none;
    color: inherit;
    background-color: var(--color-contrast-lower);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: .3s
}

.card-v9:hover {
    box-shadow: var(--shadow-md)
}

.card-v9__content {
    display: flex;
    height: 100%;
    flex-direction: column;
    position: relative;
    z-index: 2
}

.card-v9__btn {
    position: relative;
    display: inline-block;
    padding: var(--space-xs) var(--space-sm)
}

.card-v9__btn i {
    position: relative;
    z-index: 2;
    color: var(--color-bg);
    opacity: 0;
    transition: opacity .3s
}

.card-v9__btn::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-md);
    background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.8);
    opacity: 0;
    transform: translateY(25%);
    transition: opacity .3s, transform .3s var(--ease-out)
}

.card-v9:hover .card-v9__btn i {
    opacity: 1
}

.card-v9:hover .card-v9__btn::after {
    opacity: 1;
    transform: translateY(0)
}

.card-v9--overlay-bg::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: hsla(var(--color-bg-h), var(--color-bg-s), var(--color-bg-l), 0.5);
    transition: background-color .3s
}

.card-v9--overlay-bg:hover::before {
    background-color: hsla(var(--color-bg-h), var(--color-bg-s), var(--color-bg-l), 0.8)
}

.articles-v4.masonry {
    --masonry-grid-gap: var(--space-sm);
    --masonry-col-auto-size: 320px
}