* {
    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: 100vh;
    grid-template-areas:
        "left-1 main-image main-image main-image right-1"
        "left-2 main-image main-image main-image right-2"
        "left-3 main-image main-image main-image right-3"
        "bottom-1 bottom-2 bottom-3 bottom-4 bottom-5";
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 0.8fr;
    gap: 0.2rem;
    max-width: 1600px;
    margin: 0 auto;
    padding: 1rem;
    box-sizing: border-box;
}

.bottom-row {
    display: none;
}

.photo-item {
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    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 12px rgba(0, 0, 0, 0.15);
}

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

/* Grid area assignments */
.left-1 { grid-area: left-1; }
.left-2 { grid-area: left-2; }
.left-3 { grid-area: left-3; }

.main-image { grid-area: main-image; }

.right-1 { grid-area: right-1; }
.right-2 { grid-area: right-2; }
.right-3 { grid-area: right-3; }

.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; }

/* Responsive design */
@media (max-width: 1200px) {
    .photo-grid {
        height: 90vh;
        min-height: 600px;
    }
}

@media (max-width: 1024px) {
    .photo-grid {
        grid-template-areas:
            "main-image main-image main-image"
            "main-image main-image main-image"
            "left-1 left-2 right-1"
            "left-3 right-2 right-3"
            "bottom-1 bottom-2 bottom-3"
            "bottom-4 bottom-5 bottom-5";
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1.5fr 1.5fr 1fr 1fr 1fr 0.8fr;
        height: auto;
        min-height: 80vh;
    }
}

@media (max-width: 768px) {
    .photo-grid {
        grid-template-areas:
            "main-image"
            "main-image"
            "left-1"
            "left-2"
            "left-3"
            "right-1"
            "right-2"
            "right-3"
            "bottom-1"
            "bottom-2"
            "bottom-3"
            "bottom-4"
            "bottom-5";
        grid-template-columns: 1fr;
        grid-template-rows: 1.5fr 1.5fr repeat(11, 1fr);
        height: auto;
        min-height: 100vh;
        gap: 0.75rem;
        padding: 0.75rem;
    }
}

@media (max-width: 480px) {
    body {
        padding: 10px;
    }
    
    .photo-grid {
        grid-template-areas:
            "main-image"
            "left-1"
            "left-2"
            "left-3"
            "right-1"
            "right-2"
            "right-3"
            "bottom-1"
            "bottom-2"
            "bottom-3"
            "bottom-4"
            "bottom-5";
        grid-template-columns: 1fr;
        grid-template-rows: 2fr repeat(11, 1fr);
        gap: 0.5rem;
        padding: 0.5rem;
        min-height: 100vh;
    }
    
    .photo-item {
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }
    
    .photo-item:hover {
        transform: scale(1.01);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }
}

@media (max-width: 320px) {
    .photo-grid {
        gap: 0.25rem;
        padding: 0.25rem;
    }
    
    body {
        padding: 5px;
    }
}