/* ========================= */
/* RESPONSIVE */
/* ========================= */

/* Default desktop */
    .container { 
        display: flex; gap: 10px; flex-wrap: nowrap; 
    }
    .content { 
        flex: 3 1 0; 
        font-size: 18px;
        padding: 30px;
    }
    #S2 { 
        flex: 1 1 0;   
    }
    .centered-italic {
        font-size: 16px;
        margin-bottom: 10px;
    }
    .section-title { 
        font-size: 22px; 
        margin: 35px 0 15px 0;
        padding-bottom: 6px; 
    }
    .image-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        margin: 15px auto;   
    }
    
@media (max-width: 768px) {
    .container { gap: 8px; }
    .content { 
        font-size: 14px; 
        padding: 15px; }
    #S2 { max-width: 200px; min-width: 140px; font-size: 12px; padding: 6px; }
    .image-grid { 
        grid-template-columns: 1fr; }
}

@media (max-width: 390px) {
    .container { 
        gap: 4px; 
    }
    .content { 
        font-size: 12px;
        padding: 12px; 
    }
    .centered-italic { 
        font-size: 12px;
        margin-bottom: 8px;
    }
    .section-title { 
        font-size: 16px; 
        margin: 20px 0 10px 0; 
        padding-bottom: 4px; 
    }
    #S2 { max-width: 180px; min-width: 120px; font-size: 11px; padding: 5px; line-height: 1.35; }
    #S2 .block { padding: 5px; }
    #S2 .block h3 { font-size: 12px; margin-bottom: 4px; }
    #S2 li > a { font-size: 10px; padding: 2px 1px; }
    #S2 li .sub-menu li a { font-size: 9.5px; padding: 2px 1px; }
    #S2 li.has-sub > a .arrow { width: 8px; height: 8px; }
    .platforms { gap: 8px; }
    .platforms button, .platforms a { width: 36px; height: 36px; }
    .platforms img { width: 20px; height: 20px; }
    .image-grid { 
        grid-template-columns: 1fr; 
        gap: 12px; }
}