.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 {  
  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:
    "img1 img1 img1 img2 img2 img2 img2 img5 img5 img5"
    "img1 img1 img1 img2 img2 img2 img2 img5 img5 img5"
    "img1 img1 img1 img2 img2 img2 img2 img5 img5 img5"
    "img1 img1 img1 img3 img3 img4 img4 img5 img5 img5"
    "img1 img1 img1 img3 img3 img4 img4 img5 img5 img5"
    "img1 img1 img1 img3 img3 img4 img4 img5 img5 img5";
}

.img1 { grid-area: img1; }

.img2 { grid-area: img2; }

.img3 { grid-area: img3; }

.img4 { grid-area: img4; }

.img5 { grid-area: img5; }

.two {  
  max-height: 45vw;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "img6 img6 img6 img6 img6"
    "img6 img6 img6 img6 img6"
    "img6 img6 img6 img6 img6";
}

.img6 {
  grid-area: img6; }

.img6 img {
  object-position: bottom;
}
.three {  
  max-height: 30vw;
  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:
    "img7 img7 img7 img7 img7 img7 img8 img8 img8 img8"
    "img7 img7 img7 img7 img7 img7 img8 img8 img8 img8"
    "img7 img7 img7 img7 img7 img7 img8 img8 img8 img8";
}

.img7 { grid-area: img7; }

.img8 { grid-area: img8; }

.four {  
  max-height: 40vw;
  display: grid;
  grid-template-columns: 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:
    "img9 img9 img9 img10 img10 img10 img12 img12 img12 img12"
    "img9 img9 img9 img10 img10 img10 img12 img12 img12 img12"
    "img9 img9 img9 img10 img10 img10 img12 img12 img12 img12"
    "img9 img9 img9 img10 img10 img10 img12 img12 img12 img12"
    "img9 img9 img9 img11 img11 img11 img12 img12 img12 img12"
    "img9 img9 img9 img11 img11 img11 img12 img12 img12 img12"
    "img9 img9 img9 img11 img11 img11 img12 img12 img12 img12";
}

.img9 { grid-area: img9; }

.img10 { grid-area: img10; }

.img11 { grid-area: img11; }

.img12 { grid-area: img12; }

.five {  
  max-height: 25vw;
  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:
    "img13 img13 img13 img13 img13 img13 img14 img14 img14 img14"
    "img13 img13 img13 img13 img13 img13 img14 img14 img14 img14"
    "img13 img13 img13 img13 img13 img13 img14 img14 img14 img14";
}

.img13 { grid-area: img13; }

.img14 { grid-area: img14; }

.six {  
  
  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:
    "img15 img15 img15 img15 img15 img15 img16 img16 img16 img19 img19 img19"
    "img15 img15 img15 img15 img15 img15 img16 img16 img16 img19 img19 img19"
    "img15 img15 img15 img15 img15 img15 img17 img17 img17 img19 img19 img19"
    "img15 img15 img15 img15 img15 img15 img17 img17 img17 img19 img19 img19"
    "img15 img15 img15 img15 img15 img15 img18 img18 img18 img19 img19 img19"
    "img15 img15 img15 img15 img15 img15 img18 img18 img18 img19 img19 img19";
}

.img15 { grid-area: img15; }

.img16 { grid-area: img16; }

.img17 { grid-area: img17; }

.img18 { grid-area: img18; }

.img19 { grid-area: img19; }

.seven { 
  max-height: 30vw;
  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:
    "img20 img20 img20 img20 img20 img20 img20 img20 img21 img21 img21 img21 img21"
    "img20 img20 img20 img20 img20 img20 img20 img20 img21 img21 img21 img21 img21"
    "img20 img20 img20 img20 img20 img20 img20 img20 img21 img21 img21 img21 img21";
}

.img20 { grid-area: img20; }

.img21 { grid-area: img21; }

.eight {  
  max-height: 60vw;
  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 1fr;
  grid-auto-flow: row;
  grid-template-areas:
    "img22 img22 img23 img23 img23 img23 img23 img23 img24 img24 img24 img24 img24"
    "img22 img22 img23 img23 img23 img23 img23 img23 img24 img24 img24 img24 img24"
    "img22 img22 img23 img23 img23 img23 img23 img23 img24 img24 img24 img24 img24"
    "img25 img25 img25 img25 img25 img25 img25 img25 img26 img26 img26 img26 img26"
    "img25 img25 img25 img25 img25 img25 img25 img25 img26 img26 img26 img26 img26"
    "img25 img25 img25 img25 img25 img25 img25 img25 img26 img26 img26 img26 img26";
}

.img22 { grid-area: img22; }

.img23 { grid-area: img23; }

.img24 { grid-area: img24; }

.img25 { grid-area: img25; }

.img26 { grid-area: img26; }


.nine {  
  max-height: 35vw;
  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 1fr;
  grid-auto-flow: row;
  grid-template-areas:
    "img27 img27 img27 img27 img28 img28 img28 img28 img30 img30 img30 img30 img30 img30"
    "img27 img27 img27 img27 img28 img28 img28 img28 img30 img30 img30 img30 img30 img30"
    "img27 img27 img27 img27 img28 img28 img28 img28 img30 img30 img30 img30 img30 img30"
    "img27 img27 img27 img27 img28 img28 img28 img28 img30 img30 img30 img30 img30 img30"
    "img27 img27 img27 img27 img29 img29 img29 img29 img31 img31 img31 img31 img31 img31"
    "img27 img27 img27 img27 img29 img29 img29 img29 img31 img31 img31 img31 img31 img31"
    "img27 img27 img27 img27 img29 img29 img29 img29 img31 img31 img31 img31 img31 img31";
}

.img27 { grid-area: img27; }

.img28 { grid-area: img28; }

.img29 { grid-area: img29; }

.img30 { grid-area: img30; }

.img31 { grid-area: img31; }

.ten { 
  max-height: 35vw;
  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:
    "img32 img32 img32 img32 img32 img32 img32 img32 img32b img32b img32b img32b img32b img32b"
    "img32 img32 img32 img32 img32 img32 img32 img32 img32b img32b img32b img32b img32b img32b"
    "img32 img32 img32 img32 img32 img32 img32 img32 img32b img32b img32b img32b img32b img32b";
}

.img32 { grid-area: img32; }

.img32b { grid-area: img32b; }
.img32b img {
  object-position: bottom;
}

.eleven {  
  max-height: 35vw;
  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 1fr;
  grid-auto-flow: row;
  grid-template-areas:
    "img33 img33 img33 img33 img33 img34 img34 img34 img35 img35 img35 img35 img35"
    "img33 img33 img33 img33 img33 img34 img34 img34 img35 img35 img35 img35 img35"
    "img33 img33 img33 img33 img33 img34 img34 img34 img35 img35 img35 img35 img35"
    "img33 img33 img33 img33 img33 img36 img36 img36 img36 img36 img36 img36 img36"
    "img33 img33 img33 img33 img33 img36 img36 img36 img36 img36 img36 img36 img36"
    "img33 img33 img33 img33 img33 img36 img36 img36 img36 img36 img36 img36 img36";
}

.img33 { grid-area: img33; }

.img34 { grid-area: img34; }

.img35 { grid-area: img35; }

.img36 { grid-area: img36; }


.twelve {  
  max-height: 25vw;
  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:
    "img37 img37 img37 img37 img37 img37 img37 img38 img38 img38 img38 img38"
    "img37 img37 img37 img37 img37 img37 img37 img38 img38 img38 img38 img38"
    "img37 img37 img37 img37 img37 img37 img37 img38 img38 img38 img38 img38"
    "img37 img37 img37 img37 img37 img37 img37 img39 img39 img39 img39 img39"
    "img37 img37 img37 img37 img37 img37 img37 img39 img39 img39 img39 img39"
    "img37 img37 img37 img37 img37 img37 img37 img39 img39 img39 img39 img39";
}

.img37 { grid-area: img37; }

.img38 { grid-area: img38; }

.img39 { grid-area: img39; }


.thirteen {  
  max-height: 25vw;
  display: grid;
  grid-template-columns: 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:
    "img40 img40 img40 img40 img41 img41 img41 img41 img42 img42 img42 img42"
    "img40 img40 img40 img40 img41 img41 img41 img41 img42 img42 img42 img42"
    "img40 img40 img40 img40 img41 img41 img41 img41 img42 img42 img42 img42";
}

.img40 { grid-area: img40; }

.img41 { grid-area: img41; }

.img42 { grid-area: img42; }


.fourteen { 
  max-height: 35vw;
  display: grid;
  grid-template-columns: 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:
    "img43 img43 img43 img43 img43 img43 img43 img43 img43 img43 img43 img43"
    "img43 img43 img43 img43 img43 img43 img43 img43 img43 img43 img43 img43"
    "img43 img43 img43 img43 img43 img43 img43 img43 img43 img43 img43 img43";
}

.img43 { grid-area: img43; }

.fifteen {  
  
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-auto-flow: row;
  grid-template-areas:
    "img44 img44 img44 img44 img45 img45 img45 img47 img47 img47 img47 img47"
    "img44 img44 img44 img44 img45 img45 img45 img47 img47 img47 img47 img47"
    "img44 img44 img44 img44 img46 img46 img46 img47 img47 img47 img47 img47"
    "img44 img44 img44 img44 img46 img46 img46 img47 img47 img47 img47 img47";
}

.img44 { grid-area: img44; }

.img45 { grid-area: img45; }

.img46 { grid-area: img46; }

.img47 { grid-area: img47; }

.sixteen {  
  max-height: 30vw;
  display: grid;
  grid-template-columns: 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:
    "img48 img48 img48 img48 img48 img48 img48 img48 img48 img48 img48 img48"
    "img48 img48 img48 img48 img48 img48 img48 img48 img48 img48 img48 img48"
    "img48 img48 img48 img48 img48 img48 img48 img48 img48 img48 img48 img48";
}

.img48 { grid-area: img48; }

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