.projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    font-family: "Gilroy", Sans-serif;
    gap: 100px 30px;
}

@media (max-width: 1200px) {
    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .projects-grid {
        grid-template-columns: 1fr;
        gap: 60px; /* Отступы между проектами на мобильных устройствах */
    }
}

.project {
    text-align: left; /* Выравнивание текста по левому краю */
    color: #000; /* Цвет текста по умолчанию */
    border-radius: 15px; /* Скругление краев проекта */
    /* padding-left: 40px; */ /* Отступ слева для выравнивания с фоном */
    /* padding-right: 40px; */ /* Отступ справа для выравнивания с фоном */
    /* opacity: 1; */
    transform: translateY(0);
    transition: opacity 0.5s, transform 0.5s;
}

@media (max-width: 768px) {
    .project {
        background-color: var(--project-bg-color); /* Используем переменную для цвета фона */
        color: var(--project-text-color); /* Используем переменную для цвета текста */
        padding: 20px;
    }
}

.project h4 {
    margin: 10px 0;
    color: #5d5c53; /* Цвет текста заголовка и описания */
    font-weight: 400;
    font-size: 2vh;
}

.project h3 {
    margin: 20px 0 10px;
    color: #292929; /* Цвет текста заголовка и описания */
    font-size: 2.7vh;
    font-weight: 500;
}

@media (max-width: 768px) {
    .project h3,
    .project h4 {
        color: var(--project-text-color); /* Цвет текста для заголовка и описания на мобильных устройствах */
    }
}

.project-image {
    position: relative;
    width: 100%; /* Убираем отступы */
    height: 40vh; /* Фиксированная высота блока */
    overflow: hidden;
    border-radius: 10px; /* Скругление краев картинки */
    margin: 0 auto; /* Убираем отступы */
    background-color: #f0f0f0; /* Замените на ваш цвет фона */
    box-sizing: border-box; /* Включаем padding в размеры блока */
    padding: 20px; /* Отступы в ПК версии */
}

@media (max-width: 768px) {
    .project-image {
        padding: 0;
        background-color: transparent; /* Убираем фон картинки в мобильной версии */
    }
}

.project-image-inner {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 5px;
}

.project-image img {
    position: absolute;
    top: 0; /* Начальная позиция сверху */
    left: 50%;
    transform: translateX(-50%);
    animation: moveImage 20s ease-in-out infinite paused; /* Анимация, приостановленная по умолчанию */
    animation-play-state: paused;
}

@media (min-width: 769px) {
    .project-image:hover img {
        animation-play-state: running; /* Запуск анимации при наведении на ПК */
    }
}

@keyframes moveImage {
    0% {
        top: 0;
    }
    50% {
        top: 100%;
        transform: translate(-50%, -100%);
    }
    100% {
        top: 0;
    }
}

.project .button {
    display: inline-block;
    padding: 10px 20px;
    margin: 15px 0px 30px;
    background-color: #FFCC00; /* Цвет фона кнопки по умолчанию на ПК */
    color: #000000; /* Цвет текста кнопки по умолчанию на ПК */
    text-decoration: none;
    border-radius: 5px;
    text-align: left; /* Выравнивание текста по левому краю */
    border: none; /* Убираем бордер для кнопки на ПК */
}

.project .button:hover {
    background-color: #FFD700; /* Цвет фона кнопки при наведении на ПК */
}

@media (max-width: 768px) {
    .project .button {
        margin-top: 20px;
        background-color: var(--button-bg-color-mobile); /* Цвет фона кнопки на мобильной версии */
        color: var(--button-text-color-mobile); /* Цвет текста кнопки на мобильной версии */
        text-align: left; /* Выравнивание текста по левому краю */
        border: 2px solid var(--button-border-color-mobile); /* Цвет бордера кнопки на мобильной версии */
    }
}

/* Стили для кнопок фильтрации */
.project-filters {
    margin-bottom: 20px;
    text-align: center;
}

.project-filters button {
    padding: 10px 20px;
    margin: 5px; /* Отступы между кнопками */
    background-color: #F7F6F0; /* Цвет фона кнопки */
    color: #33322D; /* Цвет текста кнопки */
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.project-filters button:hover {
    background-color: #FFCC00; /* Цвет фона кнопки при наведении */
}

.project-filters button.active {
    background-color: #FFCC00; /* Цвет фона активной кнопки */
}