* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f8f9fa;
    padding: 15px;
    margin: 0;
}

.photo-grid {
    display: grid;
    width: 100%;
    height: 100%;
    grid-template-areas:
        "photo-1 photo-4 photo-4 photo-4 photo-2"
        "photo-3 photo-4 photo-4 photo-4 photo-5"
        "bottom-1 bottom-2 bottom-3 bottom-4 bottom-5";
    grid-template-columns: 3fr 2.5fr 2.5fr 2.5fr 3fr;
    grid-template-rows: 1fr 2fr 1fr;
    gap: 40px;
    max-width: 1600px;
    margin: 0 auto;
    height: 85vh;
    min-height: 700px;
    padding: 15px;
}

.photo-item {
    overflow: hidden;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

.photo-item:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Grid positioning using areas */
.photo-1 { grid-area: photo-1; }
.photo-2 { grid-area: photo-2; }
.photo-3 { grid-area: photo-3; }
.photo-4 { grid-area: photo-4; } /* Main central image spans middle 3 columns and 2 rows */
.photo-5 { grid-area: photo-5; }

.bottom-1 { grid-area: bottom-1; }
.bottom-2 { grid-area: bottom-2; }
.bottom-3 { grid-area: bottom-3; }
.bottom-4 { grid-area: bottom-4; }
.bottom-5 { grid-area: bottom-5; }

.bottom-row-item {
    overflow: hidden;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

.bottom-row-item:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.bottom-row-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Loading placeholder */
.placeholder {
    background: linear-gradient(45deg, #e0e0e0, #f0f0f0);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    font-size: 14px;
    height: 100%;
}

/* Responsive design */
@media (max-width: 768px) {
    .photo-grid {
        grid-template-areas:
            "photo-1"
            "photo-2"
            "photo-3"
            "photo-4"
            "photo-5"
            "bottom-1"
            "bottom-2"
            "bottom-3"
            "bottom-4"
            "bottom-5";
        grid-template-columns: 1fr;
        grid-template-rows: repeat(10, 1fr);
        height: auto;
        min-height: 100vh;
    }
}