.flex-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* 控制項目之間的間距 */
}

.portfolio-item {
    flex: 1 1 calc(20% - 20px); /* 每行顯示四個項目，並考慮間距 */
    box-sizing: border-box;
}

    .portfolio-item img {
        width: 100%;
        height: auto;
    }

.empty-item {
    flex: 1 1 calc(25% - 20px); /* 每行顯示四個項目，並考慮間距 */
    box-sizing: border-box;
    visibility: hidden; /* 隱藏空白項目 */
}


@media (max-width: 768px) {
    .flex-container {
        display: grid;
        flex-wrap: wrap;
        gap: 20px; /* 控制項目之間的間距 */
    }
}