/* 
=================================
FIXED MOBILE SIZE - 324x236
=================================
File: mobile-324x236-fix.css
Mục đích: Đặt kích thước cố định 324x236 cho mobile
*/

/* Force exact 324x236 size on mobile */
@media (max-width: 768px) {
    .about-image-container {
        display: flex;
        justify-content: center;
        padding: 0 20px;
    }
    
    .main-image-wrapper {
        width: 324px !important;
        height: 236px !important;
        max-width: 324px;
        max-height: 236px;
        flex-shrink: 0;
    }
    
    .about-img.portrait-layout {
        width: 324px !important;
        height: 236px !important;
        max-width: 324px;
        max-height: 236px;
        object-fit: cover;
        object-position: center top;
        clip-path: none; /* Remove clip for exact size */
    }
    
    .about-picture {
        width: 324px;
        height: 236px;
    }
    
    /* Ensure overlay matches exact size */
    .image-overlay {
        width: 324px;
        height: 236px;
    }
}

/* For very small screens, maintain aspect ratio but smaller */
@media (max-width: 360px) {
    .main-image-wrapper {
        width: 280px !important;
        height: 204px !important; /* Maintain aspect ratio 324:236 = 280:204 */
    }
    
    .about-img.portrait-layout {
        width: 280px !important;
        height: 204px !important;
    }
    
    .about-picture {
        width: 280px;
        height: 204px;
    }
    
    .image-overlay {
        width: 280px;
        height: 204px;
    }
}

/* For extra small screens (iPhone SE, etc.) */
@media (max-width: 320px) {
    .main-image-wrapper {
        width: 280px !important;
        height: 204px !important;
    }
    
    .about-img.portrait-layout {
        width: 280px !important;
        height: 204px !important;
    }
    
    .about-picture {
        width: 280px;
        height: 204px;
    }
    
    .image-overlay {
        width: 280px;
        height: 204px;
    }
}