.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 {
  height: 40vw;
  max-height: 400px;
  display: flex;
  width: 100%;
}
.one img:first-child {
  width: calc(25% - 0.25em);
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.one img:nth-child(2){
  width: calc(25% - 0.25em);
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.one img:nth-child(3){
  width: calc(25% - 0.25em);
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.one img:last-child {
  width: calc(25% - 0.25em);
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.two {
  height: 40vw;
  max-height: 600px;
}
.two .img-left {
  width: 40%;
  height: 100%;
}
.two .img-left img {
  object-position: left;
}
.two .img-right {
  width: 60%;
  height: 100%;
}
.three {  
  max-height: 40vw;
  display: grid;
  grid-template-columns: 30% 30% 20% 20%;
  grid-template-rows: 1fr 1fr 1fr;
  /* gap: 0px 0px; */
  grid-auto-flow: row;
  grid-template-areas:
    "img7 img8 img11 img11"
    "img9 img10 img11 img11"
    "img9 img10 img11 img11";
}

.img7 { grid-area: img7; }

.img8 { grid-area: img8; }

.img9 { grid-area: img9; }

.img10 { grid-area: img10; }

.img11 { grid-area: img11; }


.four {
  max-height: 40vw;
}
.four {  
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1.2fr 0.8fr 1fr;
  /* gap: 0px 0px; */
  grid-auto-flow: row;
  grid-template-areas:
    "img12 img14 img15"
    "img12 img14 img15"
    "img13 img14 img15"
    "img13 img14 img15";
}

.img12 { grid-area: img12; }

.img13 { grid-area: img13; }

.img14 { grid-area: img14; }

.img15 { grid-area: img15; }


.five {  
  max-height: 30vw;
  display: grid;
  grid-template-columns: 1fr 0.8fr 1.2fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-auto-flow: row;
  grid-template-areas:
    "img16 img17 img18"
    "img16 img17 img18"
    "img16 img17 img18";
}

.img16 { grid-area: img16; }

.img17 { grid-area: img17; }

.img18 { grid-area: img18; }

.six {  display: grid;
  max-height: 45vw;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-flow: row;
  grid-template-areas:
    "img19 img21 img23"
    "img19 img21 img23"
    "img19 img21 img23"
    "img20 img21 img23"
    "img20 img22 img23"
    "img20 img22 img23"
    "img20 img22 img24"
    "img20 img22 img24"
    "img20 img22 img24";
}

.img19 { grid-area: img19; }

.img21 { grid-area: img21; }

.img20 { grid-area: img20; }

.img22 { grid-area: img22; }

.img23 { grid-area: img23; }

.img24 { grid-area: img24; }

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

.img25 { grid-area: img25; }

.eight {  
  max-height: 35vw;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  grid-auto-flow: row;
  grid-template-areas:
    "img26 img26 img26 img26 img27 img27 img28 img28 img28";
}

.img26 { grid-area: img26; }

.img27 { grid-area: img27; }

.img28 { grid-area: img28; }

.nine {  
  max-height: 50vw;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
  grid-auto-flow: row;
  grid-template-areas:
    "img29 img29 img29 img29 img30 img30"
    "img29 img29 img29 img29 img30 img30"
    "img29 img29 img29 img29 img30 img30"
    "img29 img29 img29 img29 img31 img31"
    "img29 img29 img29 img29 img31 img31";
}

.img29 { grid-area: img29; }

.img30 { grid-area: img30; }

.img31 { grid-area: img31; }

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

.img32 { grid-area: img32; }
.eleven {  
  max-height: 50vw;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-auto-flow: row;
  grid-template-areas:
    "img33 img33 img33 img33 img34 img34 img34 img35 img35"
    "img33 img33 img33 img33 img36 img36 img36 img36 img36";
}

.img33 { grid-area: img33; }

.img34 { grid-area: img34; }

.img35 { grid-area: img35; }

.img36 { grid-area: img36; }

/* .twelve {  
  max-height: 55vw;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-auto-flow: row;
  grid-template-areas:
    "img37 img37 img37 img37 img37 img39 img39 img39 img39"
    "img38 img38 img38 img38 img38 img39 img39 img39 img39";
}

.img37 { grid-area: img37; }

.img38 { grid-area: img38; }

.img39 { grid-area: img39; } */

.twelve {  
  max-height: 50vw;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-flow: row;
  grid-template-areas:
    "img37 img37 img37 img37 img37 img39 img39 img39 img39"
    "img37 img37 img37 img37 img37 img39 img39 img39 img39"
    "img37 img37 img37 img37 img37 img39 img39 img39 img39"
    "img37 img37 img37 img37 img37 img39 img39 img39 img39"
    "img38 img38 img38 img38 img38 img39 img39 img39 img39"
    "img38 img38 img38 img38 img38 img39 img39 img39 img39"
    "img38 img38 img38 img38 img38 img39 img39 img39 img39"
    "img38 img38 img38 img38 img38 img39 img39 img39 img39";
}

.img37 { grid-area: img37; }

.img38 { grid-area: img38; }

.img39 { grid-area: img39; }

.thirteen { 
  max-height: 60vw;
  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 1fr;
  grid-auto-flow: row;
  grid-template-areas:
    "img40 img40 img40 img40 img40 img40 img42 img42 img42 img42"
    "img40 img40 img40 img40 img40 img40 img42 img42 img42 img42"
    "img40 img40 img40 img40 img40 img40 img42 img42 img42 img42"
    "img40 img40 img40 img40 img40 img40 img43 img43 img43 img43"
    "img41 img41 img41 img41 img41 img41 img43 img43 img43 img43"
    "img41 img41 img41 img41 img41 img41 img44 img44 img44 img44"
    "img41 img41 img41 img41 img41 img41 img44 img44 img44 img44"
    "img41 img41 img41 img41 img41 img41 img44 img44 img44 img44";
}

.img40 { grid-area: img40; }

.img41 { grid-area: img41; }

.img42 { grid-area: img42; }

.img43 { grid-area: img43; }

.img44 { grid-area: img44; }

.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;
  }
}