.decor-line-female {
position:absolute;
width:50%;
right:-20%;
}
.decor-line-male {
position:absolute;
width:50%;
left:-20%;
}
#countdown {
padding-top:70px !important;
}

.decor-line-gallery {
width:30%;
margin:0 auto;
margin-bottom:20px;
}
.decor-line-female img, .decor-line-male img {
width:100%;
opacity:.4;
}
.decor-opening {
position:absolute;
z-index:3;
background:rgba(0,0,0,0.6);
width:100%;
height:100%;
top:0;
left:0;
display:flex;
justify-content:center;
flex-direction:column;
text-align:center;
}

#galleries {
padding-top:30px;
}

.layout-cover.is_preview.mobile .couple-wrapper {
width:100% !important;
}

.couple-wrapper {
width:100% !important;
}

.couple-img-decor  {
display:none;
}
.female .couple-wrapper {
padding-right:3rem;
}
.female, .male {
max-width: 100% !important;
    width: 100% !important;
    flex: 100%;
    padding: 0;
}
.male .couple-wrapper {
padding-left:3rem;
}
.female, .male {
padding:0;
}
.couple-fullname {
position:absolute;
z-index:9;
right:0;
top:1.5rem;
width:100%;
}
.female .couple-fullname h4 {
position:absolute;
right:0;
white-space:nowrap;
}
.male .couple-fullname {
left:0;
right:initial;
}
.female > .text-center {
position:relative;
top:-70px;
z-index:9;
padding-left:2rem;
}
.male > .text-center {
position:relative;
top:-70px;
z-index:9;
padding-right:2rem;
}
.female > .text-center p:not(.instagram-profil) {
text-align:left !important;
font-size:1.2rem !important;
}

.male > .text-center p:not(.instagram-profil) {
text-align:right !important;
font-size:1.2rem !important;
}

.female .instagram-profil {
padding-right:4rem;
text-align:right !important;
}
.male .instagram-profil {
padding-left:4rem;
text-align:left !important;
}
.couple-separator-and {
display:none;
}
.instagram-profil a{
color:#ececec !important;
margin-bottom:50px;
}
.couple-fullname h4 {
 writing-mode: vertical-lr;
font-family:Fjalla One !important;
}

.couple-fullname h4 b {
font-family:Fjalla One !important;
}

#coupleProfile {
padding-top:0;
padding-bottom:0;
}
.couple-wrapper .couple-img img {
border-radius:0 !important;
}
.card-photo {
border-radius:0 !important;
}
#quote > .container > .row > .text-center {
display:none;
}

.quotes .female-calling-name {
position:absolute;
top:0;
left:0;
}
.decor-opening img {
width:50%;
display:inline-block;
margin:0 auto;
}

#welcome .wrapper .wrap-overlay{
max-width: 100%;
margin: auto;
padding: 1rem;
}

#coupleProfile > h1 {
display:none;
}

#welcome .wrapper .text-wrapper .couple-name h1{
text-align: left;
line-height: 1 !important;
text-transform: uppercase;
}

#welcome .wrapper .text-wrapper{
text-align: left !important;
}

#welcome .wrapper .text-wrapper .cover_photo{
width: 60% !Important;
}

#wedding-of, #date-text{
text-align: left !important;
}

.new_premCover-top #date-text{
float: left;
margin: 1rem 0;
}

.invitation_to, .invitation_to.cover-left-btn.bottom_style{
text-align: left !important;
padding: 0 1rem;
width: 100% !important;
display: block !important;
}

#button-open{
text-align: left;
border-radius: 0px !important;
left: 0;
width: 100%;
text-transform: uppercase;
letter-spacing:2px;
font-size: 14px;
}
 .new_premCover-top{
width: 100% !important;
}
.invitation_to.cover-left-btn{
padding: 0;
}

.bottom_style#button-open{
margin:  -1rem 1rem;
width: calc(100% - 2rem);
}

#quote{
background-color: #030303;
}


#instagram-filter {
margin-bottom: 0 !important;
}

#rsvp {
padding: 2rem 1rem;
}

#also_inviting li{
color: #746f63;
}

#list-rundown{
padding: 2rem 0;
}

#quote{
background-color: #030303;
}

.quotes{
font-style: unset !important;
line-height: 1.5 !important;
color: #ececec !important;
font-weight: 400 !important;
//background-color: #ececec29;
padding: 2rem 2rem;
}

#coupleProfile h4 b{
font-family: Fjalla-One;
}

.content-layout h1 {
font-size: 30px !important;
text-transform: uppercase;
}

#coupleProfile  p {
font-size: 14px;
}

.item-rundown h1{
    //border-bottom: 1px solid #030303;
    max-width: 80%;
    margin: 1rem auto;
    line-height: 1.3;
    text-transform: uppercase !important;

}
#coupleProfile .couple-separator-and h1{
margin: 2rem 0;
font-size: 3rem !important;
border-top: 1px solid #030303;
border-bottom: 1px solid #030303;
}

#story{
background-color: #030303;
}

#story h1, #story p {
color: #ececec;
}
#countdown{
background-color: #030303;
padding-bottom: 3rem;
}

#weddingDetail{
padding-top: 0;
}

#countdown li#days{
display: inline-block !important;
    font-size: 1em !important;
    padding: 1em;
    text-transform: uppercase;
    text-align: center;
}

#countdown h1{
color: #ececec;
}

#countdown li#days span{
  font-size: 1em !important;
}

#countdown ul{
//background-color: #ececec4f;
}

#countdown li span b, #countdown li b{
color: #ececec;
font-family: Encode Sans Expanded;
font-weight: 500;
}

#countdown li span b{
font-size: 22px !important;
}

#countdown li b{
font-size: 14px !important;
}

.btn-calendar, .btn-info{
border-radius: 0px !important;
background-color: #030303;
border-color: #ececec;
    font-size: 12px;
}

.content-layout .btn{
text-transform: uppercase;
letter-spacing: 2px;
}

.tgl-acara, #rsvp p{
color: #ececec !important;
}

#rsvp{
margin: 3rem auto 0 auto;
background-color: #0303034f;
}


#rsvp .btn-success{
background-color:  #030303;
border-color: #ececec;
font-family: Fjalla-One !important;
}

#rsvp .btn-success b{
font-family: Encode Sans Expanded !important;
font-size: 12px;
}

.btn-lokasi, .rundown .btn, #pay .btn{
border-radius: 0px !important;
font-size: 14px;
}

.btn-lokasi{
color: #ececec!important;
border-color: #ececec!important;
}

#adressWrapper{
background-color: #030303;
margin: 0;
}

.adress p {
color: #ececec;
font-size: 14px;
}

.adress{
padding-bottom: 2rem;
}

.google-maps{
width: 90%;
margin: 0 auto 1rem auto;
}

#also_inviting li{
font-family: Encode Sans Expanded;
margin-bottom: 10px !important;
}

#section-bottom{
background-color: #030303;
}

#instagram-filter, #wishes, #pay .cover, #live{
background-color: #030303 !important;
}

#instagram-filter h1, #instagram-filter p, #wishes h1, #wishes p, #pay .cover h1, #pay .cover p, #live h1, #live p {
color: #ececec !important;
}

#instagram-filter .btn, #live .btn{
font-size: 14px;
}

#wishes input, #wishes textarea{
background-color: #ececec;
color: #746f63;
}

#wishes .btn, #pay .btn, #live .btn{
border-color: #ececec;
border-radius: 0px !important;
}

#welcome .wrapper .wrap-overlay.middle .text-wrapper{
width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Wedding Gallery Invitation</title>
  <style>
    body {
      font-family: 'Poppins', sans-serif;
      margin: 0;
      background: #fdfcfb;
      color: #333;
    }
    header {
      text-align: center;
      padding: 2rem;
      background: linear-gradient(135deg, #ffdde1, #ee9ca7);
      color: white;
    }
    header h1 {
      font-size: 2.5rem;
      margin: 0;
    }
    header p {
      font-size: 1.2rem;
      margin-top: .5rem;
    }
    .quote {
      text-align: center;
      font-style: italic;
      margin: 2rem;
      font-size: 1.2rem;
      color: #555;
    }
    .gallery {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 20px;
      padding: 2rem;
    }
    .gallery-item {
      overflow: hidden;
      border-radius: 15px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.1);
      transition: transform 0.4s ease;
    }
    .gallery-item img {
      width: 100%;
      height: 100%;
      display: block;
      transition: transform 0.6s ease;
    }
    .gallery-item:hover {
      transform: translateY(-5px);
    }
    .gallery-item:hover img {
      transform: scale(1.1);
    }
    footer {
      text-align: center;
      padding: 1.5rem;
      background: #ffdde1;
      font-size: .9rem;
      color: #444;
    }
  </style>
</head>
<body>
  <header>
    <h1>Our Love Story</h1>
    <p>From dating, breakups, reunions, and finally married</p>
  </header>

  <div class="quote">
    “Creating memories together is the most priceless gift of all.”
  </div>

  <section class="gallery">
    <div class="gallery-item">
      <img src="https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e" alt="Couple dating">
    </div>
    <div class="gallery-item">
      <img src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee" alt="Separation moment">
    </div>
    <div class="gallery-item">
      <img src="https://images.unsplash.com/photo-1524504388940-b1c1722653e1" alt="Couple reunited">
    </div>
    <div class="gallery-item">
      <img src="https://images.unsplash.com/photo-1526170375885-4d8ecf77b99f" alt="Engagement ring">
    </div>
    <div class="gallery-item">
      <img src="https://images.unsplash.com/photo-1529634806980-cd7bcb0ca9f9" alt="Wedding ceremony">
    </div>
    <div class="gallery-item">
      <img src="https://images.unsplash.com/photo-1507089947368-19c1da9775ae" alt="Family celebration">
    </div>
  </section>

  <footer>
    With love, Bride & Groom 💕
  </footer>
</body>
</html>