@media (max-width: 1600px) {
    #full-cat {
        background-image: url("i/clairvoyant-cat-1600.jpg");
    }
}

@media (max-width: 1200px) {
    #full-cat {
        background-image: url("i/clairvoyant-cat-1200.jpg");
    }
}

@media (max-width: 900px) {
    #full-cat {
        background-image: url("i/clairvoyant-cat-900.jpg");
    }
}

@media (max-width: 768px) {
    #full-cat {
        background-image: url("i/clairvoyant-cat-768.jpg");
        background-position: center bottom;
    }

    #left {
        width: 100%;
    }

    #right {
        display: none;
    }

    #cards_container_desktop {
        display: none;
    }

    #cards_container_mobile {
        display: block;
    }

}

@media (max-width: 600px) {

    .blackbox {
        width: 100%;
    }

    article {
        font-size: 1.2em;
        padding: 1.2em;
        margin: 0 auto;
    }

}

@media (max-width: 412px) {
    :root {
        --response-width: 100%;
    }

    .menu-toggle {
        text-align: center
    }

    .menu-toggle button {
        font-size: 36px;
    }

    #full-cat h1 {
        padding: 36px 18px 0;
    }

    #left {
        padding: 0;
        min-width: auto;
    }

    #the_cat_response_cont {
        width: 100%;
    }

}