<main role="main" tabindex="-1" id="site-main">
    <ul class="kakemonos">
        <li class="kakemono"><div class="card card--holiday"></div></li>
        <li class="kakemono"><div class="card card--allen"></div></li>
        <li class="kakemono"><div class="card card--connaughton"></div></li>
        <li class="kakemono"><div class="card card--antetokounmpo"></div></li>
        <li class="kakemono"><div class="card card--lopez"></div></li>
    </ul>
    <ul class="kakemono-list">
        <li><strong>Holiday</strong> Jrue</li>
        <li><strong>Allen</strong> Grayson</li>
        <li><strong>Connaughton</strong> Pat</li>
        <li><strong>Antetokounmpo</strong> Giannis</li>
        <li><strong>Lopez</strong> Brook</li>
    </ul>
</main>

$white: #FFFFFF;
$black: #000000;
$green: #005426;

body {
    overflow-x: hidden;
    position: relative;
  margin: 0;
    padding: 0;
    font-size: 1.6em;
    line-height: 1;
    color: $black;
  background: $white;
}
#site-main {
    position: relative;
    z-index: 1;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    padding: 0 20%;
}
.kakemonos {
    display: flex;
    flex: row nowrap;
    width: 100%;
    margin: 40px 0 20px 0;
    padding: 0;
    list-style: none;
    .kakemono {
        overflow: hidden;
        position: relative;
        width: 20%;
        height: 500px;
        transition: all 0.1s linear;
        &:hover {
            opacity: 0.8 !important;
            transform: translateY(5px);
        }
    }
    .card {
        position: absolute;
        top: -100%;
        left: 0;
        width: 100%;
        height: 100%;
        transition: all 0.2s linear;
        background-color: $green;
        &:hover {
            background-blend-mode: multiply;
        }

        &--holiday {
            background: url('https://images.unsplash.com/photo-1548454782-15b189d129ab?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80') center center no-repeat;
            background-size: cover;
            animation: fadein 0.3s forwards;
        }
        &--allen {
            background: url('https://images.unsplash.com/photo-1609840170480-4c440bcd5d8f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80') center center no-repeat;
            background-size: cover;
            animation: fadein 0.3s 0.3s forwards;
        }
        &--connaughton {
            background: url('https://images.unsplash.com/photo-1617137968427-85924c800a22?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80') center center no-repeat;
            background-size: cover;
            animation: fadein 0.3s 0.6s forwards;
        }
        &--antetokounmpo {
            background: url('https://images.unsplash.com/photo-1614786269829-d24616faf56d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80') center center no-repeat;
            background-size: cover;
            animation: fadein 0.3s 0.9s forwards;
        }
        &--lopez {
            background: url('https://images.unsplash.com/photo-1618886614638-80e3c103d31a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80') center center no-repeat;
            background-size: cover;
            animation: fadein 0.3s 1.2s forwards;
        }
    }
}
@keyframes fadein {
    from {
        opacity: 0;
        top: -100%
    }
    to {
        opacity: 1;
        top: 0;
    }
}

.kakemono-list {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.8rem;
    li {
        opacity: 0;
        width: 20%;
        text-align: center;
    }
    li:nth-child(1) {
        animation: fadein 1s forwards;
    }
    li:nth-child(2) {
        animation: fadein 1s 1s forwards;
    }
    li:nth-child(3) {
        animation: fadein 1s 2s forwards;
    }
    li:nth-child(4) {
        animation: fadein 1s 3s forwards;
    }
    li:nth-child(5) {
        animation: fadein 1s 4s forwards;
    }
}