#mobile-blocker {
    display: none;
    position: absolute;
    background-color: var(--light-background);
    width: 100vw;
    min-height: 100vh;
    left: 0;
    top: 0;
    z-index: 100000;
}

#tablet {
    display: block;
}

.tablet-background {
    position: relative;
}

.tablet-background::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 24%;
    left: 0;
    top: -1px;
    background-color: var(--light-background);
}

#phone {
    display: none;
}

.phone-background {
    position: relative;
}

.phone-background::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 24%;
    left: 0;
    top: -1px;
    background-color: var(--light-background);
}

.hero-screenshot {
    margin: auto;
    width: 100%;
    max-width: 720px;
    -webkit-filter: drop-shadow(5px 5px 5px #222);
    filter: drop-shadow(16px 16px 64px rgba(0, 0, 0, 0.33)) drop-shadow(8px 8px 32px rgba(0, 0, 0, 0.33));
}

@media screen and (max-width: 1080px) {
    #desktop-content {
        display: none;
    }

    #mobile-blocker {
        display: block;
    }
}

@media screen and (max-width: 720px) {
    #tablet {
        display: none;
    }

    #phone {
        display: block;
    }
}