#host{width:100%; height: clamp(380px, 105.55vw, 760px ); position:relative;
  background: #f9f9f9;}

  #host svg { stroke:#BFBFBF; stroke-width:1.2; opacity: 1; transition: opacity 3000ms ease; 
  position: absolute;
  bottom: 0;
  height: 100%;
  width: 100%;
}

  #host svg * {
    transition: stroke 2500ms ease, stroke-width 2500ms ease, stroke-opacity 2500ms ease;
  }
  #host svg.end * {
    stroke-opacity:0;
    stroke-width:0;
  }
  #host svg.end { pointer-events:none; }
  #host svg.change{
    opacity: 0;
  }
  .img{
    opacity: 0;
    position: absolute;
    transition: opacity 3000ms ease;
  }
.img.open{
    opacity: 1;
  }


body{
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: default;
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* IE/Edge legacy */
    user-select: none;         /* 표준 */
    -webkit-touch-callout: none; /* iOS 길게눌러 선택/복사 메뉴 차단 */
    font-family: "IBM Plex Sans KR";
}

section{
    width: 100%;
    max-width: 720px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

button{
    cursor: pointer;
}

.hero .title{
    position: absolute;
    top: 46.8%;
    z-index: 1;
    width: 100%;
}

.hero .text{
    display: flex;
    flex-direction: column;
    padding-top: 44.44%;
    padding-bottom: 17.22%;
    gap: clamp(0px, 11.11vw, 80px);

    color: var(--green-3, #40523D);
    text-align: center;
    font-family: var(--font-kr-1, "IBM Plex Sans KR");

    background-image: url("../img/bg_section1.png");
    background-size: cover;
    width: 100%;
}

.hero .text .date{
    display: flex;
    flex-direction: column;
    gap: clamp(0px, 2.77vw, 20px);

    font-size: clamp(0px, 3.61vw, 26px);;
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: -0.39px;
}

.hero .text .place{
    display: flex;
    flex-direction: column;
    gap: clamp(0px, 2.77vw, 20px);

    font-size: clamp(0px, 4.44vw, 32px);;
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: -0.39px;
}

.invitation{
    background-image: url("../img/bg_section2.png");
    background-size: cover;
    width: 100%;
}

.invitation .title{
    padding: 2.77% 5.55%;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--pink-2, #E3AEC2);
    background: rgba(255, 255, 255, 0.40);

    color: var(--pink-2, #E3AEC2);
    font-family: var(--font-kr-1, "IBM Plex Sans KR");
    font-size: clamp(0px, 3.33vw, 24px);;
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 12px */
    letter-spacing: -0.36px;
    text-transform: uppercase;
    align-items: center;
}

.invitation .text-area{
    margin-top: clamp(0px, 16.11vw, 116px);
    margin-bottom: clamp(0px, 16.94vw, 121px);
    display: flex;
    flex-direction: column;
    gap: clamp(0px, 2.77vw, 20px);
    align-items: center;
}

.invitation .text{
    color: var(--text-1, #383D37);
    text-align: center;
    font-family: "IBM Plex Sans KR";
    font-size: clamp(0px, 3.88vw, 28px);;
    font-style: normal;
    font-weight: 300;
    line-height: 160%; /* 22.4px */
    letter-spacing: -0.42px;
}

.invitation .name-area{
    margin-bottom: clamp(0px, 45.83vw, 330px);;
    display: flex;
    flex-direction: column;
    gap: clamp(0px, 6.94vw, 50px);;
    width: 88.88%;
}

.invitation .name-area .name{
    color: #000;
    text-align: center;
    font-family: "IBM Plex Sans KR";
    font-size: clamp(0px, 3.88vw, 28px);;
    font-style: normal;
    font-weight: 500;
    line-height: 100%; /* 14px */

}

.invitation .name-area .parents {
    width: 10.55%;
  }
  
  .invitation .name-area .relation {
    color: var(--text-1, #383D37);
    font-weight: 300;
  }
  
  .invitation .name-area .child {
    color: var(--green-3, #40523D);
    font-size: clamp(0px, 4.44vw, 32px);;
    font-weight: 600;
    padding-left: 2.22%;
  }

  .invitation .hero-svg{
    position: absolute;
    left: 5.55%;
    width: clamp(320px, 88.88vw, 640px);
    top: 86.12%;
    z-index: 1;
  }



  .calendar{
    background-image: url("../img/bg_section3.png");
    background-size: cover;
    width: 100%;
}


.calendar .title{
    margin-top: 40.27%;

    padding: 2.77% 5.55%;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--green-3, #40523D);
    background: var(--light-yellow-2, #F6F3EA);

    color: #40523D;
    font-family: var(--font-kr-1, "IBM Plex Sans KR");
    font-size: clamp(0px, 4.44vw, 32px);
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: calc(-0.48px * (100vw / 720));
    text-transform: uppercase;
    align-items: center;
}

.calendar-grid {
    margin-top: 11.11%;
    margin-bottom: 11.66%;
    display: grid;
    width: 88.88%;
    grid-template-rows: repeat(5, minmax(0, 1fr));
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  
  .day-label,
  .day {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(0px, 3.88vw, 28px);;
    font-weight: 300;
    letter-spacing: -0.42px;
    height: clamp(0px, 10.55vw, 76px);
  }

  .day{
    color: #fff;
  }

  .day.pink{
    color: var(--pink-2, #E3AEC2);;
  }

  .day-label{
    align-items: flex-start;
  }
  
  .day-label {
    color: #FFF;
  }
  .day-label.pink {
    color: var(--pink-2, #E3AEC2);
  }
  
  .day.empty {
    visibility: hidden;
  }
  
  .day.highlight {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .day.highlight time {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  
    width: clamp(34px, 9.44vw, 68px);
    height: clamp(34px, 9.44vw, 68px);
    border-radius: 50%;
  
    font-weight: 700;
    font-size: clamp(14px, 4.44vw, 32px);
    color: var(--green-3, #40523D);
    background: var(--light-yellow-2, #F6F3EA);
  }


  /* 갤러리 */
  .gallery .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, auto);
  }
  
  .gallery .grid img {
    width: 100%;
    height: auto;
    cursor: pointer;
    object-fit: cover;
  }
  
/* 모달 스타일 */
.modal {
    visibility: hidden;
    position: fixed;
    z-index: 999;
    inset: 0;
    background-color: rgba(0,0,0,0.8);
    justify-content: center;
    align-items: center;
  
    opacity: 0;
    transform: scale(1.02);
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s linear 0.4s;
    display: flex;
    
  }
  
  .modal.show {
    visibility: visible;
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s linear 0s;
  }
  
  .modal-content {
    max-width: 90%;
    max-height: 90%;
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.4);
    transition: transform 0.4s ease;
  }
  

  /* 로케이션 */

  .information {
    background-image: url("../img/bg_section4.png");
    background-size: cover;
    width: 100%;
  
    /* 최소 16px, 뷰포트 기준 5.55vw, 최대 40px */
    padding-left: clamp(16px, 5.55vw, 40px);
    padding-right: clamp(16px, 5.55vw, 40px);
    padding-bottom: clamp(50px, 13.88vw, 100px);
  }

.information .title{
    margin-top: 13.88%;
    margin-bottom: 5.55%;
    padding: 2.77% 5.55%;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--pink-2, #E3AEC2);
    background: rgba(255, 255, 255, 0.40);

    color: var(--pink-2, #E3AEC2);
    font-family: var(--font-kr-1, "IBM Plex Sans KR");
    font-size: clamp(0px, 3.33vw, 24px);;
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 12px */
    letter-spacing: -0.36px;
    text-transform: uppercase;
    align-items: center;
}


.information .call-area {
    margin-bottom: 5.55%;
    color: var(--green-3, #40523D);
    font-family: "IBM Plex Sans KR";
    font-size: clamp(0px, 4.44vw, 32px);
    font-style: normal;
    font-weight: 500;
    line-height: 1; /* 글자 높이 = 아이콘 정렬 */
    letter-spacing: -0.48px;
    height: clamp(0px, 4.44vw, 32px);
  
    display: flex;
    align-items: center; /* 글자와 아이콘 세로 가운데 정렬 */
    gap: clamp(0px, 2.77vw, 20px);;
  }
  
  .information .call-area img {
    width: 1em;   /* 글자 크기와 동일한 크기 */
    height: 1em;  /* 정사각형 */
    object-fit: contain; /* 왜곡 방지 */
    display: inline-block;
  }

  .information .location {
    margin-bottom: 13.88%;
    text-align: center;
    color: var(--text-1, #383D37);
    text-align: center;
    font-family: "IBM Plex Sans KR";
    font-size: clamp(0px, 3.61vw, 26px);;
    font-style: normal;
    font-weight: 300;
    line-height: 160%; /* 20.8px */
    letter-spacing: -0.39px;
  }

  .map {
    width: 100%;
    border: 1px solid #ccc;
    overflow: hidden;
    margin-bottom: 13.88%;
}

.map img {
    width: 100%;        /* 가로폭 100% */
    height: auto;       /* 비율 유지 */
    display: block;
}

.navigation{
    width: 100%;
}

.information .info-title {
    margin-bottom: 2.77%;
    color: var(--green-3, #40523D);
    font-family: "IBM Plex Sans KR";
    font-size: clamp(0px, 4.44vw, 32px);
    font-style: normal;
    font-weight: 500;
    line-height: 1; /* 글자 높이 = 아이콘 정렬 */
    letter-spacing: -0.48px;
    height: clamp(0px, 4.44vw, 32px);
  
    display: flex;
    align-items: center; /* 글자와 아이콘 세로 가운데 정렬 */
    gap: clamp(0px, 2.77vw, 20px);;
  }
  
  .information .info-title img {
    width: 1em;   /* 글자 크기와 동일한 크기 */
    height: 1em;  /* 정사각형 */
    object-fit: contain; /* 왜곡 방지 */
    display: inline-block;
  }

  .information .subscription {
    margin-bottom: 2.77%;
    color: var(--text-1, #383D37);
    font-family: "IBM Plex Sans KR";
    font-size: clamp(0px, 3.61vw, 26px);;
    font-style: normal;
    font-weight: 300;
    line-height: 160%; /* 20.8px */
    letter-spacing: -0.39px;
  }

  .nav-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  
    /* row-gap: 최소 8px, 비율 1.66vw, 최대 20px */
    row-gap: clamp(8px, 1.66vw, 20px);
  
    /* column-gap: 최소 12px, 비율 2.22vw, 최대 24px */
    column-gap: clamp(12px, 2.22vw, 24px);
  }
  
  
  .nav-btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  
    /* 최소 8px, 이상적 2.22vw, 최대 16px */
    padding-top: clamp(8px, 2.22vw, 16px);
    padding-bottom: clamp(8px, 2.22vw, 16px);
  
    /* 최소 12px, 이상적 3.33vw, 최대 24px */
    padding-left: clamp(12px, 3.33vw, 24px);
    padding-right: clamp(12px, 3.33vw, 24px);
  
    border: 1px solid rgba(176, 176, 176, 0.30);
    border-radius: clamp(8px, 2.2vw, 16px);
  
    text-decoration: none;
    color: #000;
  
    font-size: clamp(0px, 3.61vw, 26px);;
    font-family: "IBM Plex Sans KR";
  
    font-weight: 500;
    line-height: 100%;

    background: #FFF;
  }
  
  .nav-btn img {
    width: clamp(24px, 5.55vw, 48px);
    height: clamp(24px, 5.55vw, 48px);
    object-fit: contain;
    margin-right: clamp(12px, 3.33vw, 24px);
  }
  
  .information .line{
    margin: 5.55% 0;
    background: rgba(176, 176, 176, 0.50);
    width: 100%;
    height: clamp(1px, 0.27vw, 22px);;
  }

  .subway {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: clamp(0px, 2.77vw, 20px);
  }

  .line9{
    display: flex;
    gap: clamp(0px, 2.77vw, 20px);
  }

  .line9 .subway-title{
    display: flex;
    width: 18.75%;
    padding: clamp(5px, 1.38vw, 10px) 0;
    justify-content: center;
    align-items: center;
    background: #B3906D;
    
    color: #FFF;
    font-size: clamp(11px, 3.05vw, 22px);;
    font-style: normal;
    font-weight: 700;
    letter-spacing: -0.33px;
    line-height: 100%;
    height: clamp(0px, 5.83vw, 42px);
  }

  .line9 .subway-info{
    color: var(--text-1, #383D37);
    font-size: clamp(0px, 3.61vw, 26px);;
    font-style: normal;
    font-weight: 300;
    line-height: 160%; /* 20.8px */
    letter-spacing: -0.39px;
  }


  .lineairport{
    display: flex;
    gap: clamp(0px, 2.77vw, 20px);
  }


  .lineairport .subway-title{
    display: flex;
    width: 18.75%;
    padding: clamp(5px, 1.38vw, 10px) 0;
    justify-content: center;
    align-items: center;
    background: #86BBE4;
    
    color: #FFF;
    font-size: clamp(11px, 3.05vw, 22px);;
    font-style: normal;
    font-weight: 700;
    letter-spacing: -0.33px;
    line-height: 100%;
    height: clamp(0px, 5.83vw, 42px);
  }

  .lineairport .subway-info{
    width: 78.125%;
    color: var(--text-1, #383D37);
    font-size: clamp(0px, 3.61vw, 26px);;
    font-style: normal;
    font-weight: 300;
    line-height: 160%; /* 20.8px */
    letter-spacing: -0.39px;
  }

  /* 버스 */
  .bus{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: clamp(0px, 2.77vw, 20px);
  }

  .main-line{
    display: flex;
    gap: clamp(0px, 2.77vw, 20px);
  }


  .main-line .bus-title{
    color: var(--green-2, #76946D);
    font-size: clamp(0px, 3.61vw, 26px);;
    font-style: normal;
    font-weight: 600;
    letter-spacing: -0.39px;
    line-height: 160%;
  }

  .main-line .bus-info{
    width: 78.125%;
    color: var(--text-1, #383D37);
    font-size: clamp(0px, 3.61vw, 26px);;
    font-style: normal;
    font-weight: 300;
    line-height: 160%; /* 20.8px */
    letter-spacing: -0.39px;
  }
  
  .village-bus{
    display: flex;
    gap: clamp(0px, 2.77vw, 20px);
  }


  .village-bus .bus-title{
    color: var(--green-2, #76946D);
    font-size: clamp(0px, 3.61vw, 26px);;
    font-style: normal;
    font-weight: 600;
    letter-spacing: -0.39px;
    line-height: 160%;
  }

  .village-bus .bus-info{
    width: 78.125%;
    color: var(--text-1, #383D37);
    font-size: clamp(0px, 3.61vw, 26px);;
    font-style: normal;
    font-weight: 300;
    line-height: 160%; /* 20.8px */
    letter-spacing: -0.39px;
  }


  /* 자가용 */
  .car{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: clamp(0px, 2.77vw, 20px);
  }

    
  .outer-ring-road{
    display: flex;
    flex-direction: column;
    gap: clamp(0px, 1.11vw, 8px);
  }


  .outer-ring-road .car-title{
    color: var(--green-2, #76946D);
    font-size: clamp(0px, 3.61vw, 26px);;
    font-style: normal;
    font-weight: 600;
    letter-spacing: -0.39px;
    line-height: 160%;
  }

  .outer-ring-road .car-info{
    color: var(--text-1, #383D37);
    font-size: clamp(0px, 3.61vw, 26px);;
    font-style: normal;
    font-weight: 300;
    line-height: 160%; /* 20.8px */
    letter-spacing: -0.39px;
  }

    
  .highway{
    display: flex;
    flex-direction: column;
    gap: clamp(0px, 1.11vw, 8px);
  }


  .highway .car-title{
    color: var(--green-2, #76946D);
    font-size: clamp(0px, 3.61vw, 26px);;
    font-style: normal;
    font-weight: 600;
    letter-spacing: -0.39px;
    line-height: 160%;
  }

  .highway .car-info{
    color: var(--text-1, #383D37);
    font-size: clamp(0px, 3.61vw, 26px);;
    font-style: normal;
    font-weight: 300;
    line-height: 160%; /* 20.8px */
    letter-spacing: -0.39px;
  }

    
  .southern-ring-road{
    display: flex;
    flex-direction: column;
    gap: clamp(0px, 1.11vw, 8px);
  }


  .southern-ring-road .car-title{
    color: var(--green-2, #76946D);
    font-size: clamp(0px, 3.61vw, 26px);;
    font-style: normal;
    font-weight: 600;
    letter-spacing: -0.39px;
    line-height: 160%;
  }

  .southern-ring-road .car-info{
    color: var(--text-1, #383D37);
    font-size: clamp(0px, 3.61vw, 26px);;
    font-style: normal;
    font-weight: 300;
    line-height: 160%; /* 20.8px */
    letter-spacing: -0.39px;
  }

/* 계좌 */

/* ============= 섹션 컨테이너 ============= */
.bank-info {
  background-image: url("../img/bg_section4.png");
  background-size: cover;
  width: 100%;

  padding: clamp(50px, 13.88vw, 100px) clamp(20px, 5.55vw, 40px);
}

/* ============= 타이틀 (ACCOUNT) ============= */
.bank-info .title {
  padding: clamp(10px, 2.77vw, 20px) clamp(20px, 5.55vw, 40px);
  border: 1px solid var(--green);
  border: 1px solid var(--green-2, #76946D);
  background: rgba(255, 255, 255, 0.40);
  
  color: var(--green-2, #76946D);
  font-weight: 600;
  line-height: 100%; /* 12px */
  letter-spacing: -0.36px;
  text-transform: uppercase;
  font-size: clamp(12px, 3.33vw, 24px);
  
  margin-bottom: clamp(20px, 5.55vw, 40px);
}

/* ============= 안내 문구 박스 ============= */
.bank-info .text {
  text-align: center;
  color: var(--text-1, #383D37);
  margin-bottom: clamp(20px, 5.55vw, 40px);


  font-size: clamp(0px, 3.61vw, 26px);;
  line-height: 1.6;
  font-weight: 300;
  line-height: 160%; /* 20.8px */
  letter-spacing: -0.39px;
}

.groom, .bride{
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(176, 176, 176, 0.50);
  border-bottom: 1px solid rgba(176, 176, 176, 0.50);
  width: 100%;
}

/* ============= 구분 라벨 (신랑측/신부측) ============= */
.bank-info .groom .label,
.bank-info .bride .label {
  background: rgba(195, 204, 159, 0.40);
  padding: clamp(15px, 4.16vw, 30px);
  color: var(--green-3, #40523D);
  font-size: clamp(0px, 3.88vw, 28px);;
  font-style: normal;
  font-weight: 500;
  line-height: 100%; /* 14px */
}

/* ============= 계좌 카드 (Flex 버전) ============= */
.bank-info .info {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(176,176,176,0.5);
  background: #fff;
  padding: clamp(20px, 5.55vw, 40px) clamp(15px, 4.16vw, 30px);
}

/* 좌측: 은행/관계 (고정 비율 + 수축 금지) */
.bank-info .bank-name {
  color: var(--text-1, #383D37);
  font-size: clamp(0px, 3.61vw, 26px);;
  font-style: normal;
  font-weight: 300;
  line-height: 100%; /* 13px */
  letter-spacing: -0.39px;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 2.22vw, 16px);

}

/* 가운데: 계좌/예금주 (남은 공간 모두) */
.bank-info .account {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 2.22vw, 16px);
   margin-left: clamp(14px, 3.88vw, 28px);
}
.bank-info .account-holder {
  color: var(--text-1, #383D37);
  font-size: clamp(0px, 3.61vw, 26px);;
  font-style: normal;
  font-weight: 500;
  line-height: 100%; /* 13px */
  letter-spacing: -0.39px;
}
.bank-info .bank-number {
  color: var(--text-1, #383D37);
  font-size: clamp(0px, 3.61vw, 26px);;
  font-style: normal;
  font-weight: 300;
  line-height: 100%; /* 13px */
  letter-spacing: -0.39px;
}


/* 우측: 복사 버튼 (오른쪽 정렬, 줄바꿈 시 아래 줄 오른쪽) */
.bank-info .coppy {
  margin-left: auto;  

  border: 1px solid rgba(176, 176, 176, 0.30);
  background: #FFF;
  padding: clamp(8px, 2.22vw, 16px) clamp(12px, 3.33vw, 24px);

  color: #000;
  font-size: clamp(12px, 3.33vw, 24px);
  font-style: normal;
  font-weight: 500;
  line-height: 100%; /* 12px */

  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.bank-info .coppy:active { transform: scale(0.98); }
.bank-info .coppy:hover  { background: #fafafa; box-shadow: 0 2px 8px rgba(0,0,0,.04); }

/* 카드 마지막 간격 유지 */
.bank-info .groom .info:last-child {
  margin-bottom: clamp(20px, 5.55vw, 40px);
}


/* 푸터 */
.footer{
  display: flex;
  width: 100%;
  padding: clamp(50px, 13.88vw, 100px) clamp(20px, 5.55vw, 40px);;
  flex-direction: column;
  align-items: flex-start;
  background: var(--green-2, #76946D);
  max-width: 720px;
}

.footer .kakao-invite{
  display: flex;
  padding: 
  clamp(5px, 1.39vw, 10px)   /* top */
  clamp(10px, 2.78vw, 20px)  /* right */
  clamp(5px, 1.39vw, 10px)   /* bottom */
  clamp(20px, 5.55vw, 40px); /* left */
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  border-radius: clamp(8px, 2.22vw, 16px);
  background: #FAE100;
  height: clamp(46px, 12.77vw, 92px);;

  color: #381E1F;
  font-size: clamp(0px, 3.88vw, 28px);;
  font-style: normal;
  font-weight: 600;
  line-height: 100%; /* 14px */
  letter-spacing: -0.42px;

  cursor: pointer;

  margin-bottom: clamp(0px, 2.77vw, 20px);;
}

.footer .kakao-invite img{
  height: 100%;
}

.footer .invite{
  display: flex;
  padding: 
  clamp(5px, 1.39vw, 10px)   /* top */
  clamp(10px, 2.78vw, 20px)  /* right */
  clamp(5px, 1.39vw, 10px)   /* bottom */
  clamp(20px, 5.55vw, 40px); /* left */
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  border-radius: clamp(8px, 2.22vw, 16px);
  background: var(--light-yellow-2, #F6F3EA);
  height: clamp(46px, 12.77vw, 92px);;

  color: var(--green-3, #40523D);
  font-size: clamp(0px, 3.88vw, 28px);;
  font-style: normal;
  font-weight: 600;
  line-height: 100%; /* 14px */
  letter-spacing: -0.42px;

  cursor: pointer;
  margin-bottom: clamp(50px, 13.88vw, 100px);
}

.footer .invite img{
  height: clamp(16px, 4.44vw, 32px);
  margin-right: clamp(0px, 2.77vw, 20px);
}

.footer .author{
  align-self: stretch;
  color: #FFF;
  text-align: center;
  font-size: clamp(11px, 3.05vw, 22px);
  font-style: normal;
  font-weight: 300;
  line-height: 160%; /* 17.6px */
  letter-spacing: -0.33px;
}