/* Основні стилі для card-row */
.card-row {
    display: flex; /* Встановлюємо flex-контейнер для ряду карток */
    flex-wrap: nowrap; /* Забороняємо перенесення карток на новий ряд */
    gap: 10px; /* Відстань між картками */
    margin: 0px; /* Компансування для margin у карток */
    justify-content: space-between; /* Розподіляємо простір між картками */
}

/* Стилі для карток всередині card-row */
.card-row .card {
    background-color: #fff; /* Білий фон для картки */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Тінь для картки */
    padding: 10px; /* Внутрішні відступи для картки */
    margin: 5px; /* Відсутність зовнішніх відступів у карток */
    border-radius: 4px; /* Закруглені кути картки */
    box-sizing: border-box; /* Включення padding і border у загальну ширину */
    flex: 1 1 100%; /* Картка займає 100% ширини, але може змінювати розмір */
}

/* Обмежений ряд карток */
.card-row-limited {
    display: flex; /* Встановлюємо flex-контейнер */
    flex-wrap: wrap; /* Дозволяємо перенесення карток на новий ряд */
    gap: 10px; /* Відстань між картками */
    justify-content: center; /* Вирівнюємо картки по центру */
}

.card-row-limited .card {
    flex: 1 1 calc(25% - 20px); /* Кожна картка займає приблизно 25% рядка з урахуванням gap */
    max-width: calc(25% - 20px); /* Максимальна ширина картки */
    box-sizing: border-box; /* Включаємо відступи та межі у ширину */
}

/* Стовпчики карток */
.card-column {
    flex: 1; /* Кожен стовпчик займає рівномірну частину ширини */
    min-width: 200px; /* Мінімальна ширина для стовпчика, щоб він не ставав занадто вузьким */
}

/* Загальні стилі для карток поза card-row */
.card {
    background-color: #fff; /* Білий фон для картки */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Тінь для картки */
    padding: 10px; /* Внутрішні відступи для картки */
    margin: 5px; /* Зовнішні відступи з верху та низу */
    border-radius: 4px; /* Закруглені кути картки */
    box-sizing: border-box; /* Включення padding і border у загальну ширину */
}

.card-home img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.card-home h1 {
    text-align: center;
}

.card-home h4 {
    text-align: justify;
}


/* Мобільна адаптивність для різних розмірів екранів */
@media (max-width: 768px),
       (max-width: 820px),
       (max-width: 864px),
       (max-width: 960px),
       (max-width: 1152px) {
    /* Стилі для .card-row */
    .card-row {
        flex-wrap: wrap; /* Дозволяємо перенесення карток на новий ряд */
        justify-content: flex-start; /* Вирівнюємо картки на мобільних пристроях */
    }

    .card-row .card {
        flex: 1 1 100%; /* Кожна картка займає 100% ширини екрану на мобільних пристроях */
        margin: 10px 0; /* Додаємо вертикальні відступи між картками */
    }

    /* Додані стилі для .card-row-limited */
    .card-row-limited {
        flex-wrap: wrap; /* Дозволяємо перенесення карток на новий ряд */
        justify-content: flex-start; /* Вирівнюємо картки на мобільних пристроях */
    }

    .card-row-limited .card {
        flex: 1 1 100%; /* Кожна картка займає 100% ширини екрану на мобільних пристроях */
        max-width: 100%; /* Забезпечуємо, щоб картка не перевищувала 100% ширини */
        margin: 10px 0; /* Додаємо вертикальні відступи між картками */
    }
}