/* Ultra-aggressive project grid fix */
/* This is a last resort fix for the 2x2 grid layout */

/* Target the direct project structure in HTML */
.projects-container .projects-carousel .projects-page {
    /* Force 2x2 grid layout */
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 30px !important;
    
    /* Reset any other layout properties that might interfere */
    float: none !important;
    columns: auto !important;
    -webkit-columns: auto !important;
    -moz-columns: auto !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
}

/* Target the direct children of projects-page */
.projects-container .projects-carousel .projects-page > div:nth-child(1) {
    grid-column: 1 !important;
    grid-row: 1 !important;
}

.projects-container .projects-carousel .projects-page > div:nth-child(2) {
    grid-column: 2 !important;
    grid-row: 1 !important;
}

.projects-container .projects-carousel .projects-page > div:nth-child(3) {
    grid-column: 1 !important;
    grid-row: 2 !important;
}

.projects-container .projects-carousel .projects-page > div:nth-child(4) {
    grid-column: 2 !important;
    grid-row: 2 !important;
}

/* Mobile responsive design */
@media (max-width: 768px) {
    .projects-container .projects-carousel .projects-page {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto auto auto !important;
    }
    
    .projects-container .projects-carousel .projects-page > div:nth-child(1),
    .projects-container .projects-carousel .projects-page > div:nth-child(2),
    .projects-container .projects-carousel .projects-page > div:nth-child(3),
    .projects-container .projects-carousel .projects-page > div:nth-child(4) {
        grid-column: 1 !important;
    }
    
    .projects-container .projects-carousel .projects-page > div:nth-child(1) {
        grid-row: 1 !important;
    }
    
    .projects-container .projects-carousel .projects-page > div:nth-child(2) {
        grid-row: 2 !important;
    }
    
    .projects-container .projects-carousel .projects-page > div:nth-child(3) {
        grid-row: 3 !important;
    }
    
    .projects-container .projects-carousel .projects-page > div:nth-child(4) {
        grid-row: 4 !important;
    }
}