/* Custom fixes with higher specificity to override existing styles */

/* Mobile Card Fixes */
@media (max-width: 480px) {
    .card-container {
        width: 75px !important;
        height: 115px !important;
        margin: 5px !important;
    }
    
    .card-front, .card-back {
        width: 100% !important;
        height: 100% !important;
    }
    
    .card-front img, .card-back img {
        width: 100% !important;
        height: 100% !important;
    }
}

/* Tablet Card Fixes */
@media (min-width: 481px) and (max-width: 768px) {
    .card-container {
        width: 85px !important;
        height: 130px !important;
        margin: 7px !important;
    }
    
    .card-front, .card-back {
        width: 100% !important;
        height: 100% !important;
    }
    
    .card-front img, .card-back img {
        width: 100% !important;
        height: 100% !important;
    }
}

/* Desktop Card Fixes */
@media (min-width: 769px) {
    .card-container {
        width: 120px !important;
        height: 180px !important;
        margin: 12px !important;
    }
    
    .card-front, .card-back {
        width: 100% !important;
        height: 100% !important;
    }
    
    .card-front img, .card-back img {
        width: 100% !important;
        height: 100% !important;
    }
}

/* Tablet Header Fix */
@media (min-width: 481px) and (max-width: 768px) {
    header {
        height: 90px !important;
    }
    
    .burger-icon {
        top: 25px !important;
    }
    
    main {
        padding-top: 100px !important;
    }
    
    .logo img {
        height: 55px !important;
    }
}