@font-face {
  font-family: "wedding-gothic-atf", sans-serif;
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "wedding-gothic-atf", sans-serif;
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "wedding-gothic-atf", sans-serif;
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "wedding-gothic-atf", sans-serif;
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Cormorant Garamond", serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Cormorant Garamond", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.font-type-1{font-family: "wedding-gothic-atf", sans-serif;}
.font-type-2{font-family: "Cormorant Garamond", serif;}
.font-type-2-i{font-family: "Cormorant Garamond", serif;font-style: italic;}


.font-xs{font-size: 10px}
.font-sm{font-size: 14px}
.font-md{font-size: 18px}
.font-lg{font-size: 24px}
.font-xl{font-size: 24px}
.font-2xl{font-size: 32px}
.font-3xl{font-size: 32px;line-height: 80px}

.w-300{font-weight: 300}
.w-400{font-weight: 400}
.w-500{font-weight: 500}
.w-600{font-weight: 600}
.w-700{font-weight: 700}
@media only screen and (min-width: 1024px) {
  .font-3xl{font-size: 48px}
}
@media only screen and (min-width: 1440px) {
  .font-xl{font-size: 32px}
  .font-2xl{font-size: 48px}
  .font-3xl{font-size: 64px}
}
@media only screen and (min-width: 1920px) {
  .font-2xl{font-size: 64px}
  .font-3xl{font-size: 72px;line-height: 90px}
}
@media only screen and (max-width: 768px) {
  .font-lg{
      font-size: 18px;
      line-height:1.3;
  }
}

h2{font-weight: 600}
body{font-weight: 400;font-family: "wedding-gothic-atf", sans-serif;}
.color-grey{color:var(--grey-white-background)}
.color-black{color:var(--main-black)}