@media screen and (max-width: 1020px) {
    .about .container {
        padding-bottom: 1rem;
        /*background-color: var(--c-dark-5);*/ /*#191C1F;*/
    }
    
    .about .container {
        /*height: 70vh;*/ /*100vh;*/
    }
    
    .about .container .cards {
        top: 15%;
    }
    
    .about .container .cards .card-left,
    .about .container .cards .card-right {
        opacity: 0;
        animation-duration: 0.5s;
        animation-delay: 2.4s;
        animation-fill-mode: both;
        animation-timing-function: ease-in-out;
    }
    
    .about .container .cards .card-left {
        display: none; /* image is hidden for now */

        animation-name: fade-left;
    
        width: 300px;
        left: 30px;
        /*color: #d6d7d9;*/
        background-color: var(--c-light-4); /*#35393c;*/
        box-shadow: 0px 0px 10px 2px rgb(0 0 0 / 10%);
        z-index: 5;
        transition: 1s;
    }
    .about .container .cards .card-right {
        animation-name: fade-right;
    
        width: auto;
        position: absolute;
        top: 80px;
        right: auto;
        padding: 20px;
        /*color: #d6d7d9;*/
        background-color: var(--c-light-4); /*#35393c;*/
        box-shadow: 0px 0px 10px 2px rgb(0 0 0 / 10%);
        z-index: 5;
        transition: 1s;
    }
}