/* ============ Gallery Grid Styles ============= */

/* Defining a 4-Column Grid for Desktop Views */
#gallery-div {
    width: 100vw;
    /* Default: Displays in a Row */
    display: grid;
    justify-content: center;
    align-items: center;

    /* Add Spacing Between Items */
    gap: 20px;

    /* Padding for Symmetry */
    padding: 20px;

    /* Defines 4 Equal Columns for the Items */
    grid-template-columns: repeat(4, 1fr);

    /* Each Items Place in the Grid */
    grid-template-areas:
        "item1 item2 item3 item4"
        "item5 item6 item7 item8"
        "item9 item10 item11 item12";
}

/* Link Gallery Items to grid-area */
#item1 {
    grid-area: item1;
}

#item2 {
    grid-area: item2;
}

#item3 {
    grid-area: item3;
}

#item4 {
    grid-area: item4;
}

#item5 {
    grid-area: item5;
}

#item6 {
    grid-area: item6;
}

#item7 {
    grid-area: item7;
}

#item8 {
    grid-area: item8;
}

#item9 {
    grid-area: item9;
}

#item10 {
    grid-area: item10;
}

#item11 {
    grid-area: item11;
}

#item12 {
    grid-area: item12;
}

/* Tablet Mode */
@media (max-width: 1000px) {
    #gallery-div {
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas:
            "item1 item2"
            "item3 item4"
            "item5 item6"
            "item7 item8"
            "item9 item10"
            "item11 item12";

        /* Ensures Gap is Maintained */
        gap: 20px;
    }
}

/* SmartPhone Mode */
@media (max-width: 450px) {
    #gallery-div {
        grid-template-columns: 1fr;
        grid-template-areas:
            "item1"
            "item2"
            "item3"
            "item4"
            "item5"
            "item6"
            "item7"
            "item8"
            "item9"
            "item10"
            "item11"
            "item12";

        /* Ensures Gap is Maintained */
        gap: 20px;
    }
}

/* New Media Query for 600px */
@media (max-width: 600px) {
    #gallery-div {
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas:
            "item1 item2"
            "item3 item4"
            "item5 item6"
            "item7 item8"
            "item9 item10"
            "item11 item12";

        /* Adjust Padding for Symmetry */
        padding: 10px;

        /* Ensures Gap is Maintained */
        gap: 20px;
    }

    /* Ensuring Gallery Items are Responsive */
    #gallery-div img {
        /* Ensures Images Scale Within their Container */
        max-width: 100%;
        /* Maintains Image Aspect Ratio */
        height: auto;
        /* Includes Padding and Border in Total Width */
        box-sizing: border-box;
    }
}