/* Исправление центрирования карточек в блоке "Знакомые проблемы" */

/* Для всех мобильных устройств */
@media (max-width: 991px) {
    /* Центрирование контейнера */
    .problems-section .container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    /* Центрирование content-container */
    .problems-section .content-container {
        width: 100%;
        max-width: calc(100% - 30px);
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* Центрирование row внутри content-container */
    .problems-section .content-container .row {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin: 0 !important;
    }
    
    /* Колонки */
    .problems-section .col-lg-6 {
        width: 100%;
        max-width: 100%;
        padding: 0 !important;
        display: flex;
        justify-content: center;
        margin-bottom: 20px;
    }
    
    /* Карточки */
    .problem-card {
        width: 100%;
        max-width: 400px; /* Ограничиваем максимальную ширину */
        margin: 0 auto 20px auto !important;
    }
}

/* Для маленьких экранов (телефоны) */
@media (max-width: 576px) {
    .problems-section .content-container {
        padding: 20px 10px !important;
    }
    
    .problem-card {
        max-width: 100%; /* На маленьких экранах используем всю ширину */
    }
    
    /* Убираем горизонтальную прокрутку */
    .problems-section {
        overflow-x: hidden !important;
    }
    
    .problems-section .container {
        overflow-x: hidden !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

/* Для очень маленьких экранов (320px - 375px) */
@media (max-width: 375px) {
    .problems-section .content-container {
        max-width: calc(100% - 20px);
        padding: 15px 8px !important;
    }
    
    .problem-card {
        font-size: 0.9rem;
    }
    
    .problem-header {
        padding: 15px 10px !important;
    }
    
    .problem-content {
        padding: 10px !important;
    }
}