@media(max-width: 520px) {
    header {
        flex-direction: column;
        height: 175px;
        justify-content: space-around;
    }
    main {       
        margin-top: 175px;        
    }

}

@media(max-width: 420px) {
    .card-info-container {
        width: 315px;
    }

}

@media(max-height: 770px) {
    .card-info-container {
        width: 315px;
    }
}

@media(max-height: 680px) {
    .card-info-container {
        width: 300px;
    }   
}

@media(max-height: 810px) {
    #card-info-content {        
        font-size: 12px;
    }
    .dia-bar{
        height: 10px;
    }
}