.background-panels-HP {
	background-color: #221c14; /* brown */
	background-color: #01141a; /* dark green */
}

.grid-container-HP {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    margin: 0 auto;
    max-width: 1200px;
    border-top: 1px solid #01141a;
    border-bottom: 1px solid #01141a;
    grid-template-areas:
        "img1  img2  img3  img4"
        "img5  img6  img7  img8"
        "img9  img10 img11 img12"
        "img13 img14 img15 img16"
        "img17 img18 img19 img20"
        "img21 img22 img23 img24"
        "img25 img26 img27 img28";
}

/* Grid items */
.grid-container-HP > div {
    position: relative;
    width: 100%;
    padding-bottom: 100%; /* Square aspect ratio */
    overflow: hidden;
}

/* Assign grid areas to children (REQUIRED) */
.grid-container-HP > div:nth-child(1) { grid-area: img1; }
.grid-container-HP > div:nth-child(2) { grid-area: img2; }
.grid-container-HP > div:nth-child(3) { grid-area: img3; }
.grid-container-HP > div:nth-child(4) { grid-area: img4; }
.grid-container-HP > div:nth-child(5) { grid-area: img5; }
.grid-container-HP > div:nth-child(6) { grid-area: img6; }
.grid-container-HP > div:nth-child(7) { grid-area: img7; }
.grid-container-HP > div:nth-child(8) { grid-area: img8; }
.grid-container-HP > div:nth-child(9) { grid-area: img9; }
.grid-container-HP > div:nth-child(10) { grid-area: img10; }
.grid-container-HP > div:nth-child(11) { grid-area: img11; }
.grid-container-HP > div:nth-child(12) { grid-area: img12; }
.grid-container-HP > div:nth-child(13) { grid-area: img13; }
.grid-container-HP > div:nth-child(14) { grid-area: img14; }
.grid-container-HP > div:nth-child(15) { grid-area: img15; }
.grid-container-HP > div:nth-child(16) { grid-area: img16; }
.grid-container-HP > div:nth-child(17) { grid-area: img17; }
.grid-container-HP > div:nth-child(18) { grid-area: img18; }
.grid-container-HP > div:nth-child(19) { grid-area: img19; }
.grid-container-HP > div:nth-child(20) { grid-area: img20; }
.grid-container-HP > div:nth-child(21) { grid-area: img21; }
.grid-container-HP > div:nth-child(22) { grid-area: img22; }
.grid-container-HP > div:nth-child(23) { grid-area: img23; }
.grid-container-HP > div:nth-child(24) { grid-area: img24; }
.grid-container-HP > div:nth-child(25) { grid-area: img25; }
.grid-container-HP > div:nth-child(26) { grid-area: img26; }
.grid-container-HP > div:nth-child(27) { grid-area: img27; }
.grid-container-HP > div:nth-child(28) { grid-area: img28; }

/* Panel and image styling */
.panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.panel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: none !important;
}

/* Hover overlay */
.hover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0);
    transition: background 0.3s ease;
}

.panel:hover .hover-overlay {
    background: rgba(255, 255, 255, 0.5);
}

/* Responsive breakpoints */
@media (max-width: 900px) {
    .grid-container-HP {
        grid-template-columns: repeat(3, 1fr);
        grid-template-areas:
            "img1  img2  img3"
            "img4  img5  img6"
            "img7  img8  img9"
            "img10 img11 img12"
            "img13 img14 img15"
            "img16 img17 img18"
            "img19 img20 img21"
            "img22 img23 img24"
            "img25 img26 img27"
            "img28 .    ."; /* Adjust for remaining items */
    }
}

@media (max-width: 650px) {
    .grid-container-HP {
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas:
            "img1  img2"
            "img3  img4"
            "img5  img6"
            "img7  img8"
            "img9  img10"
            "img11 img12"
            "img13 img14"
            "img15 img16"
            "img17 img18"
            "img19 img20"
            "img21 img22"
            "img23 img24"
            "img25 img26"
            "img27 img28";
    }
}

@media (max-width: 480px) {
    .grid-container-HP {
        grid-template-columns: 1fr;
        grid-template-areas:
            "img1"
            "img2"
            "img3"
            "img4"
            "img5"
            "img6"
            "img7"
            "img8"
            "img9"
            "img10"
            "img11"
            "img12"
            "img13"
            "img14"
            "img15"
            "img16"
            "img17"
            "img18"
            "img19"
            "img20"
            "img21"
            "img22"
            "img23"
            "img24"
            "img25"
            "img26"
            "img27"
            "img28";
    }
}