/* Базовий стиль для сітки */
.grid-project-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 2.5rem;
}

.row-image-project {
    position: relative;
}

.row-image-project img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Для мобільних екранів */
@media (max-width: 768px) {
    .grid-project-container {
        grid-template-columns: repeat(1, 1fr);
        gap: 1rem;
    }
}

/* Для середніх екранів */
@media (max-width: 1024px) {
    .grid-project-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Для великих екранів */
@media (max-width: 1280px) {
    .grid-project-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Для дуже великих екранів */
@media (max-width: 1440px) {
    .grid-project-container {
        grid-template-columns: repeat(4, 1fr);
    }
}