main {
    background-size: cover;
    background-image: url("../img/7a2def94f8ad6026660ee6d063e541479773f350.jpg");
    max-width: 1440px;
    grid-column: 1/-1;
    grid-row: 1/-1;
    height: 100%;

    display: grid;
}

main img {
    width: 100%;
    height: 100%;
}

main #main-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(269px, 1fr));
    padding: 12% 15%;
    gap: 15px;
    grid-row: 1/-1;
    grid-column: 1/-1;
}

#main-section p {
    display: none;
    color: white;
}

#header-txt {
    display: none;
    justify-self: center;
    margin: 15% 0;
}

#header-txt h1 {
    color: white;
    font-size: 10em;
    padding: 5% 15%;
}

.img {
    display: grid;

    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

.img p {
    grid-row: 1/-1;
    grid-column: 1/-1;
    justify-self: center;
    align-self: end;
    background-color: #0009;
    padding: 3% 97px;
}

.img img {
    grid-row: 1/-1;
    grid-column: 1/-1;
}

#lightbox {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #0009;
    display: grid;

    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(12, 1fr);
}

#lightbox img {
    width: 1000px;
    height: auto;
    justify-self: center;
    align-self: center;

    grid-column: 2/-2;
    grid-row: 2/-2;
    grid-auto-flow: row;
}

#lightbox.hideThis{
  display: none;
}

#leftarrow{
    size: 1em;
    order: 2;
    justify-self: start;
    grid-column: 4/5;
    grid-row: 7/8;
    font-size: 3em;
    justify-self: center;
}

#rightarrow{
    size: 1em;
    order: 2;
    justify-self: end;
    grid-column: 9/10;
    grid-row: 7/8;
    font-size: 3em;
    justify-self:  center;
}

/* #img1 {
    grid-area: img1;
    grid-column: 1/2;
    grid-row: 1/2;
}

#img2 {
    grid-area: img2;
    grid-column: 2/3;
    grid-row: 1/2;
}

#img3 {
    grid-area: img3;
    grid-column: 3/4;
    grid-row: 1/2;
}

#img4 {
    grid-area: img4;
    grid-column: 1/2;
    grid-row: 2/3;
}

#img5 {
    grid-area: img5;
    grid-column: 2/3;
    grid-row: 2/3;
}

#img6 {
    grid-area: img6;
    grid-column: 3/4;
    grid-row: 2/3;
}

#img7 {
    grid-area: img7;
    grid-column: 1/2;
    grid-row: 3/4;
}

#img8 {
    grid-area: img8;
    grid-column: 2/3;
    grid-row: 3/4;
}

#img9 {
    grid-area: img9;
    grid-column: 3/4;
    grid-row: 3/4;
} */