.gal-sec-top {
  width: 100%;
  height: 750px;
  display: flex;
  align-items: flex-end;
  position: relative;
  margin: auto;
  margin-bottom: 1em;
  max-width: 1500px;
}
.gal-sec-top-container {
  width: 100%;
  height: 70%;
}
.gal-sec-top-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.h1-container {
  width: 45%;
  height: 100%;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  background-color: rgba(0, 0, 0, 1);
  position: absolute;
  right: 0;
  top: 0;
  padding-top: 4em;
}
.gal-sec-top-container h1 {
  width: 90%;
  font-size: 5.5em;
  font-weight: bold;
  text-align: left;
  font-family: 'Josefin';
  line-height: 1em;
}
.date-photo-div {
  width: 100%;
  height: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  
}
.date-container {
  width: 90%;
  height: auto;
  text-align: end;
  font-size: 2em;
  align-self: flex-end;
  /* border-top: 5px solid #f5f5f58e; */
  border-top: 5px solid var(--red);
  display: flex;
  justify-content: flex-end;
  padding-right: 10%;
  padding-top: 1em;
}
.wed-date {
  font-family: 'tenor';
}

/* Gallery Section */
.gallery-container {
  width: 100%;
  height: auto;
  max-width: 1500px;
  margin: auto;
}
.strip {
  width: 100%;
  /* height: 30vw; */
  /* max-height: 450px; */
  display: flex;
  /* align-items: center; */
  justify-content: center;
  gap: 1em;
  margin-bottom: 1em;
  overflow: hidden;
}
.strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  
}
.one {  
  max-height: 500px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-auto-flow: row;
  grid-template-areas:
    "img1 img1 img1 img1 img1 img2 img2 img2 img2 img2 img2 img2 img2 img2"
    "img1 img1 img1 img1 img1 img2 img2 img2 img2 img2 img2 img2 img2 img2"
    "img1 img1 img1 img1 img1 img2 img2 img2 img2 img2 img2 img2 img2 img2";
}

.img1 { grid-area: img1; }

.img2 { grid-area: img2; }

.two {  
  max-height: 800px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
  grid-auto-flow: row;
  grid-template-areas:
    "img3 img3 img3 img3 img3 img3 img3 img3 img3 img3 img4 img4 img4 img4"
    "img3 img3 img3 img3 img3 img3 img3 img3 img3 img3 img4 img4 img4 img4"
    "img3 img3 img3 img3 img3 img3 img3 img3 img3 img3 img7 img7 img7 img7"
    "img5 img5 img5 img5 img5 img5 img6 img6 img6 img6 img7 img7 img7 img7"
    "img5 img5 img5 img5 img5 img5 img6 img6 img6 img6 img7 img7 img7 img7";
}

.img3 { grid-area: img3; }

.img4 { grid-area: img4; }

.img5 { grid-area: img5; }

.img6 { grid-area: img6; }

.img7 { grid-area: img7; }


.three {  
  max-height: 550px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-auto-flow: row;
  grid-template-areas:
    "img8 img8 img8 img8 img8 img8 img8 img8 img9 img9 img9 img9 img9"
    "img8 img8 img8 img8 img8 img8 img8 img8 img9 img9 img9 img9 img9"
    "img8 img8 img8 img8 img8 img8 img8 img8 img9 img9 img9 img9 img9";
}

.img8 { grid-area: img8; }

.img9 { grid-area: img9; }


.four {  
  max-height: 600px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-flow: row;
  grid-template-areas:
    "img10 img10 img10 img10 img10 img10 img11 img11 img11 img11 img11 img11 img11 img11"
    "img10 img10 img10 img10 img10 img10 img11 img11 img11 img11 img11 img11 img11 img11"
    "img10 img10 img10 img10 img10 img10 img11 img11 img11 img11 img11 img11 img11 img11"
    "img10 img10 img10 img10 img10 img10 img12 img12 img12 img12 img12 img12 img12 img12"
    "img10 img10 img10 img10 img10 img10 img12 img12 img12 img12 img12 img12 img12 img12"
    "img10 img10 img10 img10 img10 img10 img12 img12 img12 img12 img12 img12 img12 img12";
}

.img10 { grid-area: img10; }

.img11 { grid-area: img11; }

.img12 { grid-area: img12; }

.five {  
  max-height: 350px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-auto-flow: row;
  grid-template-areas:
    "img13 img13 img13 img13 img14 img14 img14 img14 img15 img15 img15 img15 img15"
    "img13 img13 img13 img13 img14 img14 img14 img14 img15 img15 img15 img15 img15"
    "img13 img13 img13 img13 img14 img14 img14 img14 img15 img15 img15 img15 img15";
}

.img13 { grid-area: img13; }

.img14 { grid-area: img14; }

.img15 { grid-area: img15; }


.six {  
  max-height: 550px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-auto-flow: row;
  grid-template-areas:
    "img16 img16 img16 img16 img16 img16 img16 img16 img16 img16 img16 img16 img16"
    "img16 img16 img16 img16 img16 img16 img16 img16 img16 img16 img16 img16 img16"
    "img16 img16 img16 img16 img16 img16 img16 img16 img16 img16 img16 img16 img16";
}

.img16 { grid-area: img16; }

.seven {  
  max-height: 450px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-auto-flow: row;
  grid-template-areas:
    "img17 img17 img17 img17 img17 img18 img18 img18 img18 img18 img18 img18 img18 img18"
    "img17 img17 img17 img17 img17 img18 img18 img18 img18 img18 img18 img18 img18 img18"
    "img17 img17 img17 img17 img17 img18 img18 img18 img18 img18 img18 img18 img18 img18";
}

.img17 { grid-area: img17; }

.img18 { grid-area: img18; }


.eight { 
  max-height: 400px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-auto-flow: row;
  grid-template-areas:
    "img19 img19 img19 img19 img19 img19 img19b img19b img19b img19b img19b img19b img19b img19b"
    "img19 img19 img19 img19 img19 img19 img19b img19b img19b img19b img19b img19b img19b img19b"
    "img19 img19 img19 img19 img19 img19 img19b img19b img19b img19b img19b img19b img19b img19b";
}

.img19 { grid-area: img19; }

.img19b { grid-area: img19b; }


.nine {  
  max-height: 370px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-auto-flow: row;
  grid-template-areas:
    "img19c img19c img19c img19c img19c img20 img20 img20 img20 img20 img20 img20 img20 img20"
    "img19c img19c img19c img19c img19c img20 img20 img20 img20 img20 img20 img20 img20 img20"
    "img19c img19c img19c img19c img19c img20 img20 img20 img20 img20 img20 img20 img20 img20";
}

.img19c { grid-area: img19c; }

.img20 { grid-area: img20; }

.ten {  
  max-height: 500px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-auto-flow: row;
  grid-template-areas:
    "img21 img21 img21 img21 img21 img21 img21 img21 img21 img22 img22 img22 img22 img22"
    "img21 img21 img21 img21 img21 img21 img21 img21 img21 img22 img22 img22 img22 img22"
    "img21 img21 img21 img21 img21 img21 img21 img21 img21 img22 img22 img22 img22 img22";
}

.img21 { grid-area: img21; }

.img22 { grid-area: img22; }

.eleven {  
  max-height: 800px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-flow: row;
  grid-template-areas:
    "img23 img23 img23 img23 img23 img23 img24 img24 img24 img24 img24 img24 img24 img24"
    "img23 img23 img23 img23 img23 img23 img24 img24 img24 img24 img24 img24 img24 img24"
    "img23 img23 img23 img23 img23 img23 img24 img24 img24 img24 img24 img24 img24 img24"
    "img23 img23 img23 img23 img23 img23 img25 img25 img25 img25 img25 img25 img25 img25"
    "img23 img23 img23 img23 img23 img23 img25 img25 img25 img25 img25 img25 img25 img25"
    "img23 img23 img23 img23 img23 img23 img25 img25 img25 img25 img25 img25 img25 img25";
}

.img23 { grid-area: img23; }

.img24 { grid-area: img24; }

.img25 { grid-area: img25; }

.twelve {  
  max-height: 850px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-flow: row;
  grid-template-areas:
    "img26 img26 img26 img26 img26 img26 img26 img26 img26 img26 img27 img27 img27 img27 img27"
    "img26 img26 img26 img26 img26 img26 img26 img26 img26 img26 img27 img27 img27 img27 img27"
    "img26 img26 img26 img26 img26 img26 img26 img26 img26 img26 img27 img27 img27 img27 img27"
    "img26 img26 img26 img26 img26 img26 img26 img26 img26 img26 img27 img27 img27 img27 img27"
    "img28 img28 img28 img28 img28 img29 img29 img29 img29 img29 img30 img30 img30 img30 img30"
    "img28 img28 img28 img28 img28 img29 img29 img29 img29 img29 img30 img30 img30 img30 img30"
    "img28 img28 img28 img28 img28 img29 img29 img29 img29 img29 img30 img30 img30 img30 img30";
}

.img26 { grid-area: img26; }

.img27 { grid-area: img27; }

.img28 { grid-area: img28; }

.img29 { grid-area: img29; }

.img30 { grid-area: img30; }

.thirteen {  
  max-height: 550px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "img31 img31 img31 img31 img31 img31 img31 img31 img31 img31 img31 img31 img31 img31"
    "img31 img31 img31 img31 img31 img31 img31 img31 img31 img31 img31 img31 img31 img31"
    "img31 img31 img31 img31 img31 img31 img31 img31 img31 img31 img31 img31 img31 img31";
}

.img31 { grid-area: img31; }

.fourteen { 
  max-height: 750px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-flow: row;
  grid-template-areas:
    "img32 img32 img32 img32 img32 img32 img33 img33 img33 img33 img33 img35 img35 img35 img35 img35 img35"
    "img32 img32 img32 img32 img32 img32 img33 img33 img33 img33 img33 img35 img35 img35 img35 img35 img35"
    "img32 img32 img32 img32 img32 img32 img33 img33 img33 img33 img33 img35 img35 img35 img35 img35 img35"
    "img32 img32 img32 img32 img32 img32 img33 img33 img33 img33 img33 img35 img35 img35 img35 img35 img35"
    "img32 img32 img32 img32 img32 img32 img34 img34 img34 img34 img34 img35 img35 img35 img35 img35 img35"
    "img32 img32 img32 img32 img32 img32 img34 img34 img34 img34 img34 img35 img35 img35 img35 img35 img35"
    "img32 img32 img32 img32 img32 img32 img34 img34 img34 img34 img34 img35 img35 img35 img35 img35 img35";
}

.img32 { grid-area: img32; }

.img33 { grid-area: img33; }

.img34 { grid-area: img34; }

.img35 { grid-area: img35; }

/* Sections Below Gallery */
.sec-photo {
  width: 100%;
  height: auto;
  background-color: rgba(0, 0, 0, 1);
  max-width: 1500px;
  margin: 0 auto;
}
.photo-container {
  width: 90%;
  height: auto;
  margin: auto;
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'tenor';
  font-size: 1.5em;
  text-align: right;
  padding: 1.5em 0;
}
.photo-container a {
  color: white;
  text-decoration: none;
}
.photo-container span {
  font-size: 0.9em;
  opacity: 0.6;
  
}
/* Gallery Index */
.sec-gal-index {
  width: 100%;
  height: auto;
  margin: auto;
  margin-top: 4em;
  margin-bottom: 1em;
}
.gal-index-div {
  width: 70%;
  height: auto;
  display: flex;
  max-width: 1500px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1em;
  margin: auto;
  font-family: 'tenor';
  font-size: 1.9em;
}
.arrow-name-div {
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  cursor: pointer;
}
.arrow-name-div:hover .pre-img {
  /* opacity: 0.9; */
  transform: translateX(-15%);
}
.arrow-name-div:hover .next-img {
  /* opacity: 0.9; */
  transform: rotate(180deg) translateX(-15%);
}
.gal-index-div a {
  color: rgb(28, 28, 28);
}
.index-logo {
  width: 70px;
  height: 70px;
  
}
.pre-img {
  width: 50px;
  height: 50px;
  /* opacity: 0.3; */
  transition: transform 0.4s;
}
.next-img {
  width: 50px;
  height: 50px;
  /* opacity: 0.3; */
  transform: rotate(180deg);
  transition: transform 0.4s;
}
@media screen and (max-width: 1000px) {
  .gal-sec-top {
    height: 700px;
  }
  .gal-sec-top-container {
    display: flex;
    height: 60%;
  }
  .gal-sec-top-container img {
    height: 100%;
    width: 100% !important;
    align-self: flex-end;
  }
  .h1-container {
    width: 100%;
    height: 40%;
    padding-top: 0;
    justify-content: center;
  }
  .h1-container h1 {
    font-size: 4em;
    position: absolute;
    top: 30%;
    left: 10%;
    text-align: left;
  }
  .date-photo-div{

    justify-content: flex-end;
    font-size: 0.7em;
  }
  
  .gal-index-div {
    font-size: 1.3em;
    width: 90%;
  }
  .pre-img, .next-img {
    width: 30px;
    height: 30px;
  }
  .index-logo {
    width: 40px;
    height: 40px;
  }
}
@media screen and (max-width: 700px) {
  .strip {
    font-size: 0.5em;
  }
  .gal-sec-top {
    height: 450px;
    margin-bottom: 0.5em;
  }
  .h1-container h1 {
    font-size: 2.5em;
    top: 23%;
  }
  .date-photo-div{
    font-size: 0.6em;
  }
  .photo-container {
    font-size: 0.9em;
  }
  .gal-index-div {
    flex-direction: column;
    gap: 0.5em;
  }
}