.photo-container {
    width: 100%;
    max-width: 1100px;
    aspect-ratio: 4 / 3;
    display: grid;
    background: #111;
    border-radius: 8px;
    overflow: hidden;
    gap: 0;
}

/* 年月樣式 */
.date {
    font-size: 1.3rem;
    font-weight: 600;
    color: #fff;
    background: rgba(0, 0, 0, 0.75);
    padding: 8px 14px;
    white-space: nowrap;
    width: fit-content;
    border-radius: 0 0 6px 0;
    z-index: 5;
}

/* 圖片區域 */
.images {
    display: grid;
    width: 100%;
    height: 100%;
    gap: 5px;
    padding: 5px;
    box-sizing: border-box;
    min-height: 0;
}

    .images img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        border-radius: 3px;
    }

/* ===== 年月位置 ===== */
.photo-container.date-top {
    grid-template-rows: auto 1fr;
    grid-template-columns: 1fr;
}

    .photo-container.date-top .date {
        grid-row: 1;
        justify-self: start;
    }

.photo-container.date-bottom {
    grid-template-rows: 1fr auto;
    grid-template-columns: 1fr;
}

    .photo-container.date-bottom .date {
        grid-row: 2;
        justify-self: start;
    }

/* ===== 3 張排列 ===== */
.layout-3-horizontal {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
}

.layout-3-big-left {
    grid-template-columns: 1.7fr 1fr;
    grid-template-rows: 1fr 1fr;
}

    .layout-3-big-left img:nth-child(1) {
        grid-row: 1 / 3;
    }

.layout-3-top-bottom {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1.4fr 1fr;
}

    .layout-3-top-bottom img:nth-child(1) {
        grid-column: 1 / 3;
    }

/* ===== 5 張排列 ===== */
.layout-5-3-2 {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 1fr 1fr;
}

    .layout-5-3-2 img:nth-child(1) {
        grid-column: 1 / 3;
    }

    .layout-5-3-2 img:nth-child(2) {
        grid-column: 3 / 5;
    }

    .layout-5-3-2 img:nth-child(3) {
        grid-column: 5 / 7;
    }

    .layout-5-3-2 img:nth-child(4) {
        grid-column: 2 / 4;
    }

    .layout-5-3-2 img:nth-child(5) {
        grid-column: 4 / 6;
    }

.layout-5-2-3 {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 1fr 1fr;
}

    .layout-5-2-3 img:nth-child(1) {
        grid-column: 2 / 4;
    }

    .layout-5-2-3 img:nth-child(2) {
        grid-column: 4 / 6;
    }

    .layout-5-2-3 img:nth-child(3) {
        grid-column: 1 / 3;
    }

    .layout-5-2-3 img:nth-child(4) {
        grid-column: 3 / 5;
    }

    .layout-5-2-3 img:nth-child(5) {
        grid-column: 5 / 7;
    }

.layout-5-big-left {
    grid-template-columns: 1.6fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

    .layout-5-big-left img:nth-child(1) {
        grid-row: 1 / 3;
    }