.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: 87%;
  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: 40vw;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-auto-flow: row;
  grid-template-areas:
    "img1 img1 img1"
    "img1 img1 img1"
    "img1 img1 img1";
}

.img1 { grid-area: img1; }

.two {  
  max-height: 35vw;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-auto-flow: row;
  grid-template-areas:
    "img2 img2 img2 img2 img2 img3 img3 img3"
    "img2 img2 img2 img2 img2 img3 img3 img3"
    "img2 img2 img2 img2 img2 img3 img3 img3";
}

.img2 { grid-area: img2; }

.img3 { grid-area: img3; }

.three {
  max-height: 55vw;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-flow: row;
  grid-template-areas:
    "img4 img4 img4 img5 img5 img5 img5 img5"
    "img4 img4 img4 img5 img5 img5 img5 img5"
    "img4 img4 img4 img5 img5 img5 img5 img5"
    "img4 img4 img4 img6 img6 img7 img7 img7"
    "img4 img4 img4 img6 img6 img7 img7 img7"
    "img4 img4 img4 img6 img6 img7 img7 img7";
}

.img4 { grid-area: img4; }

.img5 { grid-area: img5; }

.img6 { grid-area: img6; }

.img7 { grid-area: img7; }


.four {  
  max-height: 30vw;
  display: grid;
  grid-template-columns: 1fr 1fr 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:
    "img8 img8 img8 img8 img8 img8 img8 img8 img9 img9 img9 img9 img10 img10 img10 img10"
    "img8 img8 img8 img8 img8 img8 img8 img8 img9 img9 img9 img9 img10 img10 img10 img10"
    "img8 img8 img8 img8 img8 img8 img8 img8 img9 img9 img9 img9 img10 img10 img10 img10";
}

.img8 { grid-area: img8; }

.img9 { grid-area: img9; }

.img10 { grid-area: img10; }

.five {  
  max-height: 35vw;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-auto-flow: row;
  grid-template-areas:
    "img11 img11 img11 img11 img11 img11"
    "img11 img11 img11 img11 img11 img11"
    "img11 img11 img11 img11 img11 img11";
}

.img11 { grid-area: img11; }

.six {  
  max-height: 30vw;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-auto-flow: row;
  grid-template-areas:
    "img12 img12 img12 img12 img12 img13 img13 img13 img14 img14"
    "img12 img12 img12 img12 img12 img13 img13 img13 img14 img14";
}

.img12 { grid-area: img12; }

.img13 { grid-area: img13; }

.img14 { grid-area: img14; }

.seven {  
  max-height: 45vw;
  display: grid;
  grid-template-columns: 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:
    "img15 img15 img15 img15 img15 img15 img15 img15 img15 img19 img19 img19 img19"
    "img15 img15 img15 img15 img15 img15 img15 img15 img15 img19 img19 img19 img19"
    "img15 img15 img15 img15 img15 img15 img15 img15 img15 img19 img19 img19 img19"
    "img16 img16 img16 img17 img17 img17 img18 img18 img18 img19 img19 img19 img19"
    "img16 img16 img16 img17 img17 img17 img18 img18 img18 img19 img19 img19 img19";
}

.img15 { grid-area: img15; }

.img16 { grid-area: img16; }

.img17 { grid-area: img17; }

.img18 { grid-area: img18; }

.img19 { grid-area: img19; }

.eight {  
  
  display: grid;
  grid-template-columns: 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:
    "img20 img20 img20 img20 img20 img20 img21 img21 img21 img23 img23 img23"
    "img20 img20 img20 img20 img20 img20 img21 img21 img21 img23 img23 img23"
    "img20 img20 img20 img20 img20 img20 img21 img21 img21 img23 img23 img23"
    "img20 img20 img20 img20 img20 img20 img22 img22 img22 img23 img23 img23"
    "img20 img20 img20 img20 img20 img20 img22 img22 img22 img23 img23 img23"
    "img20 img20 img20 img20 img20 img20 img22 img22 img22 img23 img23 img23";
}

.img20 { grid-area: img20; }

.img21 { grid-area: img21; }

.img22 { grid-area: img22; }

.img23 { grid-area: img23; }

.nine {  
  display: grid;
  grid-template-columns: 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:
    "img24 img24 img24 img25 img25 img25 img27 img27 img27 img27 img27 img27"
    "img24 img24 img24 img25 img25 img25 img27 img27 img27 img27 img27 img27"
    "img24 img24 img24 img25 img25 img25 img27 img27 img27 img27 img27 img27"
    "img24 img24 img24 img26 img26 img26 img27 img27 img27 img27 img27 img27"
    "img24 img24 img24 img26 img26 img26 img27 img27 img27 img27 img27 img27"
    "img24 img24 img24 img26 img26 img26 img27 img27 img27 img27 img27 img27";
}

.img24 { grid-area: img24; }

.img25 { grid-area: img25; }

.img26 { grid-area: img26; }

.img27 { grid-area: img27; }

.ten {  
  max-height: 30vw;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-auto-flow: row;
  grid-template-areas:
    "img28 img28 img28 img28 img28 img29 img29 img29"
    "img28 img28 img28 img28 img28 img29 img29 img29"
    "img28 img28 img28 img28 img28 img29 img29 img29";
}

.img28 { grid-area: img28; }

.img29 { grid-area: img29; }

.eleven {  
  
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-auto-flow: row;
  grid-template-areas:
    "img30 img30 img30 img30 img30 img30"
    "img30 img30 img30 img30 img30 img30"
    "img30 img30 img30 img30 img30 img30";
}

.img30 { grid-area: img30; }

.twelve {  
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-auto-flow: row;
  grid-template-areas:
    "img31 img31 img31 img31 img31 img31 img32 img32 img32 img32"
    "img31 img31 img31 img31 img31 img31 img32 img32 img32 img32"
    "img31 img31 img31 img31 img31 img31 img32 img32 img32 img32";
}

.img31 { grid-area: img31; }

.img32 { grid-area: img32; }

.thirteen {  
  display: grid;
  grid-template-columns: 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:
    "img33 img33 img33 img33 img34 img34 img34 img34 img34 img34"
    "img33 img33 img33 img33 img34 img34 img34 img34 img34 img34"
    "img33 img33 img33 img33 img34 img34 img34 img34 img34 img34"
    "img33 img33 img33 img33 img35 img35 img35 img35 img35 img35"
    "img33 img33 img33 img33 img35 img35 img35 img35 img35 img35"
    "img33 img33 img33 img33 img35 img35 img35 img35 img35 img35";
}

.img33 { grid-area: img33; }

.img34 { grid-area: img34; }

.img35 { grid-area: img35; }


.fourteen {  
  max-height: 35vw;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-auto-flow: row;
  grid-template-areas:
    "img45 img46 img47"
    "img45 img46 img47";
}

.img45 { grid-area: img45; }

.img46 { grid-area: img46; }

.img47 { grid-area: img47; }

.fifteen {  
  max-height: 40vw;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-auto-flow: row;
  grid-template-areas:
    "img48 img48 img48"
    "img48 img48 img48";
}

.img48 { grid-area: img48; }

.sixteen {  
  max-height: 40vw;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-flow: row;
  grid-template-areas:
    "img49 img49 img49 img49 img50 img50 img50"
    "img49 img49 img49 img49 img50 img50 img50"
    "img49 img49 img49 img49 img50 img50 img50"
    "img49 img49 img49 img49 img51 img51 img51"
    "img49 img49 img49 img49 img51 img51 img51"
    "img49 img49 img49 img49 img51 img51 img51";
}

.img49 { grid-area: img49; }

.img50 { grid-area: img50; }

.img51 { grid-area: img51; }

.seventeen {  
  max-height: 50vw;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr [ii] 1fr;
  grid-auto-flow: row;
  grid-template-areas:
    "img52 img52 img52 img54 img54 img55 img55"
    "img52 img52 img52 img54 img54 img55 img55"
    "img52 img52 img52 img54 img54 img55 img55"
    "img53 img53 img53 img54 img54 img55 img55"
    "img53 img53 img53 img54 img54 img55 img55"
    "img53 img53 img53 img54 img54 img55 img55";
}

.img52 { grid-area: img52; }

.img53 { grid-area: img53; }

.img54 { grid-area: img54; }

.img55 { grid-area: img55; }

/* 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;
  }
}