*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --app-responsive-ratio: 1;
    --waterfall-tb: calc(120px * var(--app-responsive-ratio));
    --waterfall-gap: calc(20px * var(--app-responsive-ratio));
    --waterfall-item-width: 25%;
    --waterfall-title-font-size: calc(24px * var(--app-responsive-ratio));
    --waterfall-title-padding: 1em 0.5em;
    --waterfall-title-weight: 400;
    --waterfall-title-color: #ffffff;
    --waterfall-title-hover-color: #d6063a;
}

html,
body {
    background: #131313;
}

.waterfall-container {
    max-width: 1600px;
    margin: var(--waterfall-tb) auto;
}

.waterfall-wrapper {
    margin-left: calc(-1 * var(--waterfall-gap));
    margin-right: calc(-1 * var(--waterfall-gap));
}

.waterfall-sizer,
.waterfall-item {
    width: var(--waterfall-item-width);
}

.waterfall-item {
    padding: calc(var(--waterfall-gap) / 2);
    display: block;
    cursor: pointer;
    transition: 0.5s;
    text-decoration: none;
}

.waterfall-item-image {
    display: block;
    max-width: 100%;
}

.waterfall-item-title {
    font-size: var(--waterfall-title-font-size);
    padding: var(--waterfall-title-padding);
    color: var(--waterfall-title-color);
    font-weight: var(--waterfall-title-weight);
    transition: 0.5s;
}

.waterfall-item:hover {
    transform: scale(0.95);
}

.waterfall-item:hover .waterfall-item-title {
    color: var(--waterfall-title-hover-color);
}

/* 1440 */
@media (max-width: 1440px) {
    :root {
        --app-responsive-ratio: 0.9;
        --waterfall-item-width: 25%;
    }
}

/* 1366 */
@media (max-width: 1366px) {
    :root {
        --app-responsive-ratio: 0.8;
        --waterfall-item-width: 33.333333%;
    }
}

/* 1024 */
@media (max-width: 1024px) {
    :root {
        --app-responsive-ratio: 0.7;
        --waterfall-item-width: 50%;
    }
}

/* 768 */
@media (max-width: 768px) {
    :root {
        --app-responsive-ratio: 0.6;
        --waterfall-item-width: 50%;
    }

    .waterfall-container {
        padding-left: 24px;
        padding-right: 24px;
    }
}

/* 576 */
@media (max-width: 576px) {
    :root {
        --app-responsive-ratio: 0.6;
        --waterfall-item-width: 100%;
    }
}