/* ----------------------- cases------------------ */

#cases{
    display: flex;
    flex-direction: column;
    gap: 4em;
    width: 80%;
    place-self: center;
    margin: 3em 0;
}
#cases div a{
    display: flex;
    width: 100%;
    gap: 3em;
    flex-direction: row;
    justify-content: stretch;
    align-items:center;
    text-decoration: none;
    color:var(--color-main);
    padding: 1.5em;
    border-radius: 1em;
    div{
        width: 50%;
        img{
            width: 100%;
            height:100%;
            border-radius: .5em;
        }
    }
    section{
        width: 40%;
        align-items: start;
        justify-content: start;
        height: auto;
        h3{
            font-size: 3em;
            padding: 0;
            margin: 0;
        
        }
        p:nth-of-type(1){
            color: var(--light-dark-red);
            font-weight: 200;
        }
        p:nth-of-type(2){
            padding: 3em 0;
        }
    }
}
#cases a:hover{
    box-shadow: 1px 1px 10px var(--box-shadow);
    transform: scale(1.03);
    transition: all .3s ease-in-out;
    h3{
        text-decoration: underline;
    }
}
#cases div:nth-child(2n) a{
    display: flex;
    flex-direction: row-reverse;
}


@media (max-width:800px){
    #cases{
        width: 90%;
    }
    #cases div a{
        flex-direction: column;
        box-shadow: 1px 1px 10px var(--box-shadow);
        div{
            width: 100%;
        }
        section{
            width: 100%;
            
            p:nth-of-type(2){
                padding:1em 0;
            }
        }
    }
    #cases div:nth-child(2n) a{
        display: flex;
        flex-direction:column;
    }
}

@media (min-width:320px)and (max-width:460px) { 
     #cases{
        margin: 2em auto;
    }
}