/* Additional fix for the portfolio layout on the index page */

/* Override portfolio layout at all screen sizes to ensure 2-per-row layout */
.index-page .portfolio-section .portfolio-gallery {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    gap: 8px !important;
    grid-template-columns: none !important;
}

/* Make sure items are exactly 2 per row at all times */
.index-page .portfolio-section .portfolio-item {
    width: calc(50% - 4px) !important;
    flex: 0 0 calc(50% - 4px) !important;
    max-width: calc(50% - 4px) !important;
    margin: 0 !important;
    min-height: 170px !important;
}

/* Make sure images fill their container properly */
.index-page .portfolio-section .portfolio-item img,
.index-page .portfolio-section .portfolio-item video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Specifically target mobile devices */
@media (max-width: 768px) {
    /* Reinforce the layout for mobile */
    .index-page .portfolio-section .portfolio-gallery {
        padding: 4px !important;
        gap: 4px !important;
    }
    
    .index-page .portfolio-section .portfolio-item {
        min-height: 150px !important;
    }
}