.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: 80vw;
  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 1fr;
  grid-auto-flow: row;
  grid-template-areas:
    "img1 img1 img1 img1 img1 img2 img2 img2 img2 img2 img2 img2"
    "img1 img1 img1 img1 img1 img2 img2 img2 img2 img2 img2 img2"
    "img3 img3 img3 img3 img3 img2 img2 img2 img2 img2 img2 img2"
    "img3 img3 img3 img3 img3 img4 img4 img4 img5 img5 img5 img5"
    "img3 img3 img3 img3 img3 img4 img4 img4 img5 img5 img5 img5"
    "img3 img3 img3 img3 img3 img4 img4 img4 img5 img5 img5 img5"
    "img3 img3 img3 img3 img3 img4 img4 img4 img5 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: 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:
    "img6 img6 img6 img6 img6 img6 img6 img6 img6 img6 img6 img6"
    "img6 img6 img6 img6 img6 img6 img6 img6 img6 img6 img6 img6"
    "img6 img6 img6 img6 img6 img6 img6 img6 img6 img6 img6 img6";
}

.img6 { grid-area: img6; }

.three {  
  
  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:
    "img7 img7 img7 img7 img7 img8 img8 img8 img8 img8 img8 img8"
    "img7 img7 img7 img7 img7 img8 img8 img8 img8 img8 img8 img8"
    "img7 img7 img7 img7 img7 img8 img8 img8 img8 img8 img8 img8";
}

.img7 { grid-area: img7; }

.img8 { grid-area: img8; }


.four {  
  max-height: 50vw;
  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 1fr;
  grid-auto-flow: row;
  grid-template-areas:
    "img9 img9 img9 img9 img9 img9 img10 img10 img10 img11 img11 img11"
    "img9 img9 img9 img9 img9 img9 img10 img10 img10 img11 img11 img11"
    "img9 img9 img9 img9 img9 img9 img10 img10 img10 img11 img11 img11"
    "img12 img12 img12 img13 img13 img13 img13 img13 img13 img11 img11 img11"
    "img12 img12 img12 img13 img13 img13 img13 img13 img13 img11 img11 img11"
    "img12 img12 img12 img13 img13 img13 img13 img13 img13 img11 img11 img11"
    "img12 img12 img12 img13 img13 img13 img13 img13 img13 img11 img11 img11";
}

.img9 { grid-area: img9; }

.img10 { grid-area: img10; }

.img11 { grid-area: img11; }

.img12 { grid-area: img12; }

.img13 { grid-area: img13; }


.five { 
  max-height: 30vw;
  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:
    "img14 img14 img14 img14 img14 img15 img15 img15 img15 img16 img16 img16 img16 img16"
    "img14 img14 img14 img14 img14 img15 img15 img15 img15 img16 img16 img16 img16 img16"
    "img14 img14 img14 img14 img14 img15 img15 img15 img15 img16 img16 img16 img16 img16";
}

.img14 { grid-area: img14; }

.img15 { grid-area: img15; }

.img16 { grid-area: img16; }

.six {  
  max-height: 30vw;
  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 img17 img17 img17 img17 img17 img17 img17 img17 img17"
    "img17 img17 img17 img17 img17 img17 img17 img17 img17 img17 img17 img17 img17 img17"
    "img17 img17 img17 img17 img17 img17 img17 img17 img17 img17 img17 img17 img17 img17";
}

.img17 { grid-area: img17; }

.seven {  
  max-height: 40vw;
  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:
    "img18 img18 img18 img18 img18 img18 img18 img18 img20 img20 img20 img20 img20 img20"
    "img18 img18 img18 img18 img18 img18 img18 img18 img20 img20 img20 img20 img20 img20"
    "img18 img18 img18 img18 img18 img18 img18 img18 img20 img20 img20 img20 img20 img20"
    "img19 img19 img19 img19 img19 img19 img19 img19 img20 img20 img20 img20 img20 img20"
    "img19 img19 img19 img19 img19 img19 img19 img19 img20 img20 img20 img20 img20 img20"
    "img19 img19 img19 img19 img19 img19 img19 img19 img20 img20 img20 img20 img20 img20";
}

.img18 { grid-area: img18; }

.img19 { grid-area: img19; }

.img20 { grid-area: img20; }


.eight {  
  max-height: 30vw;
  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 img22 img22 img22 img22 img22 img23 img23 img23 img23 img23 img23"
    "img21 img21 img21 img22 img22 img22 img22 img22 img23 img23 img23 img23 img23 img23"
    "img21 img21 img21 img22 img22 img22 img22 img22 img23 img23 img23 img23 img23 img23";
}

.img21 { grid-area: img21; }

.img22 { grid-area: img22; }

.img23 { grid-area: img23; }

.nine {  
  max-height: 50vw;
  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:
    "img24 img24 img24 img24 img24 img24 img25 img25 img25 img25 img25 img25 img25 img25 img25"
    "img24 img24 img24 img24 img24 img24 img25 img25 img25 img25 img25 img25 img25 img25 img25"
    "img24 img24 img24 img24 img24 img24 img25 img25 img25 img25 img25 img25 img25 img25 img25"
    "img24 img24 img24 img24 img24 img24 img25 img25 img25 img25 img25 img25 img25 img25 img25"
    "img24 img24 img24 img24 img24 img24 img26 img26 img26 img26 img26 img27 img27 img27 img27"
    "img24 img24 img24 img24 img24 img24 img26 img26 img26 img26 img26 img27 img27 img27 img27"
    "img24 img24 img24 img24 img24 img24 img26 img26 img26 img26 img26 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 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-auto-flow: row;
  grid-template-areas:
    "img28 img28 img28 img28 img28 img28 img29 img29 img29 img29 img29 img29 img29"
    "img28 img28 img28 img28 img28 img28 img29 img29 img29 img29 img29 img29 img29"
    "img28 img28 img28 img28 img28 img28 img29 img29 img29 img29 img29 img29 img29";
}

.img28 { grid-area: img28; }

.img29 { grid-area: img29; }


.eleven {  
  max-height: 35vw;
  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;
  grid-auto-flow: row;
  grid-template-areas:
    "img30 img30 img30 img30 img30 img30 img32 img32 img32 img32 img32 img32 img32 img32 img32"
    "img30 img30 img30 img30 img30 img30 img32 img32 img32 img32 img32 img32 img32 img32 img32"
    "img30 img30 img30 img30 img30 img30 img32 img32 img32 img32 img32 img32 img32 img32 img32"
    "img31 img31 img31 img31 img31 img31 img32 img32 img32 img32 img32 img32 img32 img32 img32"
    "img31 img31 img31 img31 img31 img31 img32 img32 img32 img32 img32 img32 img32 img32 img32"
    "img31 img31 img31 img31 img31 img31 img32 img32 img32 img32 img32 img32 img32 img32 img32";
}

.img30 { grid-area: img30; }

.img31 { grid-area: img31; }

.img32 { grid-area: img32; }



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