.hidden-field {
          position: absolute;
          width: 1px;
          height: 1px;
          overflow: hidden;
          clip: rect(0 0 0 0);
          white-space: nowrap
}

.privacy-notice {
          max-width: 680px;
          margin: 18px auto 0;
          font-size: .85rem;
          opacity: .8
}

:root {
          --peach: #f7d9cc;
          --cream: #fff8f4;
          --brown: #70483f;
          --gold: #b77a5f;
          --hero-gradient: linear-gradient(135deg, #f6d8cc 0%, #fff8f4 100%)
}

* {
          box-sizing: border-box
}

html {
          scroll-behavior: smooth
}

body {
          margin: 0;
          font-family: Georgia, "Times New Roman", serif;
          font-size: 18px;
          color: var(--brown);
          background: var(--cream);
          overflow-x: hidden
}

.language-switcher {
          position: fixed;
          top: max(16px, env(safe-area-inset-top));
          right: max(16px, env(safe-area-inset-right));
          z-index: 300;
          display: flex;
          gap: 4px;
          padding: 4px;
          border-radius: 999px;
          border: 1px solid rgba(112, 72, 63, .28);
          background: rgba(255, 248, 244, .82);
          backdrop-filter: blur(8px);
          box-shadow: 0 4px 14px rgba(112, 72, 63, .12)
}

.language-switcher a {
          min-width: 30px;
          padding: 5px 6px;
          border-radius: 999px;
          color: var(--brown);
          font-size: 12px;
          letter-spacing: .12em;
          text-align: center;
          text-decoration: none
}

.language-switcher a:hover,
.language-switcher a:focus-visible,
.language-switcher a.active {
          background: var(--hero-gradient);
          outline: none
}

#video-intro {
          position: fixed;
          inset: 0;
          z-index: 101;
          display: flex;
          align-items: center;
          justify-content: center;
          background: #000;
          overflow: hidden;
          opacity: 1;
          visibility: visible;
          transition: opacity 0.5s ease, visibility 0.5s ease
}

#video-intro.hide {
          display: none;
          opacity: 0;
          visibility: hidden;
          pointer-events: none
}

#intro-video {
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: center;
          display: block
}

.video-skip-btn {
          position: absolute;
          top: 20px;
          right: 20px;
          padding: 10px 20px;
          border: 1px solid rgba(255, 255, 255, 0.7);
          background: rgba(0, 0, 0, 0.4);
          color: #fff;
          font-family: Georgia, "Times New Roman", serif;
          font-size: 14px;
          letter-spacing: .15em;
          text-transform: uppercase;
          cursor: pointer;
          transition: all 0.3s ease;
          opacity: 0;
          visibility: hidden
}

.video-skip-btn.visible {
          opacity: 1;
          visibility: visible
}

.video-skip-btn:hover {
          background: rgba(0, 0, 0, 0.6);
          border-color: #fff
}

#initial-envelope {
          position: fixed;
          inset: 0;
          z-index: 100;
          display: flex;
          align-items: center;
          justify-content: center;
          background: #f8ddd1;
          overflow: hidden;
          cursor: pointer;
          transition: opacity 1s ease, visibility 1s ease
}

#initial-envelope {
          width: 100vw;
          height: 100dvh;
          min-height: 100svh;
          padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)
}

#initial-envelope.hide {
          opacity: 0;
          visibility: hidden;
          pointer-events: none
}

#initial-img {
          width: 100%;
          height: 100%;
          max-width: 100vw;
          max-height: 100dvh;
          object-fit: cover;
          object-position: center;
          display: block
}

#initial-envelope.opening #initial-img {
          transform: scale(1.08);
          filter: brightness(1.05)
}

.envelope-overlay {
          position: absolute;
          bottom: 6vh;
          left: 50%;
          transform: translateX(-50%);
          text-align: center;
          letter-spacing: .22em;
          font-size: 14px;
          text-transform: uppercase;
          color: #70483f;
          animation: pulse 2s infinite;
          white-space: nowrap
}

.envelope-overlay span {
          display: block;
          font-size: 26px;
          letter-spacing: 0;
          margin-bottom: 8px
}

.open-invite-btn,
.discover-btn {
          position: absolute;
          bottom: 7vh;
          left: 50%;
          transform: translateX(-50%);
          padding: 10px 18px;
          border: 1px solid rgba(112, 72, 63, .65);
          border-radius: 999px;
          background: var(--hero-gradient);
          color: var(--brown);
          font-family: Georgia, "Times New Roman", serif;
          font-size: 13px;
          letter-spacing: .14em;
          text-transform: uppercase;
          cursor: pointer;
          opacity: 0;
          visibility: hidden;
          box-shadow: 0 8px 20px rgba(112, 72, 63, .16);
          transition: opacity .4s ease, visibility .4s ease, transform .4s ease, box-shadow .25s ease, filter .25s ease
}

.open-invite-btn.visible,
.discover-btn.visible {
          opacity: 1;
          visibility: visible
}

.discover-btn {
          background: var(--hero-gradient);
          border-color: rgba(112, 72, 63, .65);
          color: var(--brown)
}

.open-invite-btn:hover,
.discover-btn:hover,
.btn:hover,
.map-btn:hover {
          filter: brightness(.97);
          box-shadow: 0 11px 24px rgba(112, 72, 63, .24)
}

.open-invite-btn:focus-visible,
.discover-btn:focus-visible,
.btn:focus-visible,
.map-btn:focus-visible {
          outline: 2px solid var(--gold);
          outline-offset: 4px
}

.open-invite-btn {
          background: rgba(112, 72, 63, .75);
          border-color: var(--cream);
          color: var(--cream)
}

.open-invite-btn:hover {
          background: rgba(112, 72, 63, .9)
}

@keyframes pulse {
          50% {
                    opacity: .45
          }
}

main {
          display: none
}

main.visible {
          display: block;
          animation: fadeIn 1.2s ease
}

@keyframes fadeIn {
          from {
                    opacity: 0;
                    transform: translateY(15px)
          }

          to {
                    opacity: 1;
                    transform: none
          }
}

.hero {
          min-height: 100dvh;
          display: flex;
          align-items: center;
          justify-content: center;
          text-align: center;
          padding: clamp(32px, 7vh, 72px) clamp(24px, 5vw, 80px);
          background: var(--hero-gradient);
          position: relative;
          overflow: hidden;
          isolation: isolate
}

.hero:before {
          content: "";
          position: absolute;
          inset: 0;
          background: url('../img/optimized/uve1.webp') center / cover no-repeat;
          opacity: .18;
          pointer-events: none;
          z-index: 0
}

.hero:after {
          content: "";
          position: absolute;
          inset: 0;
          background: rgba(255, 248, 244, .3);
          pointer-events: none;
          z-index: 0
}

.hero>div {
          position: relative;
          z-index: 1;
          width: min(100%, 900px);
          margin: auto
}

.monogram {
          font-size: clamp(24px, 3vw, 34px);
          letter-spacing: .3em;
          margin-left: .3em
}

.eyebrow {
          font-size: clamp(13px, 1.4vw, 16px);
          letter-spacing: .35em;
          text-transform: uppercase;
          margin: clamp(16px, 3vh, 30px) 0 clamp(12px, 2vh, 18px)
}

h1 {
          font-size: clamp(42px, 7vw, 90px);
          font-weight: 400;
          margin: 0;
          font-style: italic
}

.date {
          font-size: clamp(17px, 2vw, 21px);
          letter-spacing: .35em;
          margin: clamp(14px, 2.5vh, 20px) 0 clamp(22px, 4vh, 35px)
}

.countdown {
          display: flex;
          justify-content: center;
          gap: clamp(10px, 2vw, 18px);
          flex-wrap: wrap
}

.time {
          min-width: clamp(58px, 7vw, 70px)
}

.time strong {
          display: block;
          font-size: clamp(25px, 2.8vw, 32px);
          font-weight: 400
}

.time small {
          font-size: 12px;
          letter-spacing: .2em;
          text-transform: uppercase
}

.btn {
          display: inline-block;
          padding: 10px 18px;
          border: 1px solid rgba(112, 72, 63, .65);
          border-radius: 999px;
          color: var(--brown);
          text-decoration: none;
          letter-spacing: .15em;
          text-transform: uppercase;
          font-size: 13px;
          margin-top: 35px;
          background: var(--hero-gradient);
          box-shadow: 0 8px 20px rgba(112, 72, 63, .14);
          transition: filter .25s ease, box-shadow .25s ease
}

section {
          padding: 14px 24px;
          max-width: 900px;
          margin: auto;
          text-align: center
}

.section-kicker {
          letter-spacing: .3em;
          text-transform: uppercase;
          font-size: 15px
}

.story-section-decoration {
          display: block;
          width: min(100%, 360px);
          height: auto;
          max-height: 28svh;
          object-fit: contain;
          margin: 0 auto 24px
}

.calice-decoration {
          position: absolute;
          bottom: clamp(18px, 4vh, 42px);
          left: 50%;
          transform: translateX(-50%);
          display: block;
          width: min(45vw, 280px);
          height: auto;
          opacity: .18;
          z-index: 1
}

.story-text-decoration {
          display: block;
          width: min(100%, 280px);
          height: auto;
          max-height: 20svh;
          object-fit: contain;
          margin: 28px auto 0
}

h2 {
          font-size: clamp(30px, 4vw, 38px);
          font-weight: 400;
          margin: 12px 0 20px;
          font-style: italic
}

.ornament {
          font-size: 22px;
          color: var(--gold);
          margin: 15px
}

.gallery-hint {
          margin: -4px 0 0;
          color: var(--gold);
          font-size: 14px;
          letter-spacing: .08em;
          text-transform: uppercase
}

.story {
          line-height: 1.7;
          max-width: 820px;
          margin: auto;
          font-size: 21px;
          text-align: center
}

.story p {
          margin: 0 0 1.4em
}

.story p:last-child {
          margin-bottom: 0
}

.cards {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 18px;
          margin-top: 35px
}

.card {
          display: flex;
          flex-direction: column;
          padding: 18px;
          background: var(--cream);
          border: 1px solid #efd8ce;
          min-height: 620px
}

.card h3 {
          font-weight: 400;
          font-size: 24px;
          margin: 4px
}

.timeline-image {
          width: 100%;
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 10px 0 0
}

.timeline-image img {
          max-width: 100%;
          max-height: 100%;
          height: auto;
          display: block
}

.card p {
          line-height: 1.7
}

.gallery {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
          gap: 18px;
          margin-top: 35px
}

.gallery-item {
          position: relative;
          overflow: hidden;
          aspect-ratio: 1;
          background: #fff;
          border: 1px solid #efd8ce;
          cursor: pointer;
          perspective: 1000px
}

.gallery-item::after {
          content: "↻";
          position: absolute;
          right: 12px;
          bottom: 10px;
          z-index: 2;
          width: 30px;
          height: 30px;
          border: 1px solid rgba(255, 255, 255, .85);
          border-radius: 50%;
          background: rgba(112, 72, 63, .7);
          color: #fff;
          font-size: 20px;
          line-height: 28px;
          text-align: center;
          transition: transform .3s ease, opacity .3s ease
}

.gallery-item.flipped::after {
          transform: rotate(180deg);
          opacity: .55
}

.gallery-item-inner {
          position: relative;
          width: 100%;
          height: 100%;
          transition: transform 0.6s ease;
          transform-style: preserve-3d
}

.gallery-item.flipped .gallery-item-inner {
          transform: rotateY(180deg)
}

.gallery-item img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: center;
          display: block;
          backface-visibility: hidden;
          -webkit-backface-visibility: hidden;
          transform: rotateY(180deg)
}

.gallery-item img:hover {
          filter: brightness(0.95)
}

.gallery-overlay {
          position: absolute;
          inset: 0;
          background: var(--hero-gradient);
          display: flex;
          align-items: center;
          justify-content: center;
          text-align: center;
          padding: 20px;
          backface-visibility: hidden;
          -webkit-backface-visibility: hidden
}

.gallery-item.flipped .gallery-overlay {
          pointer-events: none
}

.gallery-overlay span {
          color: var(--brown);
          font-size: 18px;
          letter-spacing: 0.1em;
          font-style: italic;
          text-transform: uppercase
}

.witnesses {
          display: grid;
          grid-template-columns: repeat(3, minmax(0, 300px));
          justify-content: center;
          column-gap: 24px;
          row-gap: 14px;
          margin-top: 45px
}

.witnesses-label {
          grid-row: 1;
          font-weight: 400;
          font-size: clamp(22px, 5vw, 30px);
          letter-spacing: .06em;
          margin: 0;
          text-align: center;
          color: var(--gold)
}

.witnesses-label-bride {
          grid-column: 1
}

.witnesses-label-groom {
          grid-column: 2 / 4
}

.witness {
          grid-row: 2;
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 10px;
          width: 140px
}

.witness img {
          width: 120px;
          height: 120px;
          border-radius: 10%;
          object-fit: cover;
          border: 3px solid var(--peach);
          box-shadow: 0 6px 16px rgba(112, 72, 63, .18)
}

.witness span {
          font-size: 15px;
          letter-spacing: .04em;
          color: var(--brown)
}

.witness.has-bio {
          cursor: pointer;
          width: 100%;
          max-width: 300px;
          aspect-ratio: 1;
          justify-content: center;
          align-items: center;
          text-align: center;
          gap: 8px;
          padding: 24px;
          background: var(--hero-gradient);
          border: 1px solid #efd8ce;
          box-shadow: 0 6px 16px rgba(112, 72, 63, .18);
          transition: box-shadow .3s ease
}

.witness.has-bio:hover {
          box-shadow: 0 10px 22px rgba(112, 72, 63, .28)
}

.witness.has-bio>img {
          display: none
}

.witness.has-bio .witness-name {
          color: var(--brown);
          font-size: 18px;
          letter-spacing: .1em;
          text-transform: uppercase
}

.witness-tagline {
          font-style: italic;
          font-size: 15px;
          opacity: .95
}

.witness.has-bio .witness-tagline {
          color: #fff
}

.witness-tagline::after {
          content: " (tocca per leggere)";
          display: block;
          margin-top: 6px;
          font-size: 11px;
          font-style: normal;
          letter-spacing: .08em;
          text-transform: uppercase;
          opacity: .75
}

.witness.open .witness-tagline::after {
          content: " (tocca per chiudere)"
}

.witness-backdrop {
          position: fixed;
          inset: 0;
          z-index: 200;
          background: rgba(112, 72, 63, .55);
          opacity: 0;
          visibility: hidden;
          transition: opacity .3s ease, visibility .3s ease
}

.witness-backdrop.visible {
          opacity: 1;
          visibility: visible
}

.witness-bio {
          position: fixed;
          top: 50%;
          left: 50%;
          z-index: 201;
          width: min(90vw, 640px);
          max-height: 85vh;
          overflow-y: auto;
          text-align: center;
          background: var(--cream);
          border: 1px solid #efd8ce;
          padding: 32px 28px;
          box-shadow: 0 20px 50px rgba(112, 72, 63, .35);
          opacity: 0;
          visibility: hidden;
          pointer-events: none;
          transform: translate(-50%, -50%) scale(.94);
          transition: opacity .3s ease, transform .3s ease, visibility .3s ease
}

.witness.open .witness-bio {
          opacity: 1;
          visibility: visible;
          pointer-events: auto;
          transform: translate(-50%, -50%) scale(1)
}

.witness-bio-close {
          position: sticky;
          top: 0;
          float: right;
          width: 32px;
          height: 32px;
          margin: -8px -8px 0 8px;
          border: 1px solid var(--brown);
          background: var(--cream);
          color: var(--brown);
          font-size: 18px;
          line-height: 1;
          cursor: pointer
}

.witness-bio-header {
          display: flex;
          flex-direction: column;
          align-items: center;
          text-align: center;
          gap: 10px;
          clear: both;
          margin: 0 0 20px
}

.witness-bio .witness-bio-photo {
          width: 220px;
          height: 220px;
          flex-shrink: 0;
          border-radius: 10%;
          object-fit: cover;
          border: 3px solid var(--peach);
          box-shadow: 0 6px 16px rgba(112, 72, 63, .18)
}

.witness-bio .witness-bio-name {
          display: block;
          font-size: clamp(28px, 8vw, 52px);
          letter-spacing: .04em;
          color: var(--brown)
}

.witness-bio .witness-bio-tagline {
          display: block;
          font-style: italic;
          font-size: 17px;
          color: var(--brown);
          margin-top: 2px
}

.witness-bio p {
          margin: 0 0 1.1em;
          font-size: 18px;
          line-height: 1.7;
          color: var(--brown)
}

.witness-bio p:last-child {
          margin-bottom: 0
}

.location-wrap {
          display: grid;
          grid-template-columns: 1.4fr 1fr;
          flex: 1;
          gap: 14px;
          margin-top: 12px;
          align-items: stretch
}

.map-box,
.info-box {
          background: #fff;
          border: 1px solid #efd8ce;
          padding: 16px;
          min-height: 260px
}

.map-box {
          padding: 0;
          overflow: hidden
}

.map-box iframe {
          width: 100%;
          height: 100%;
          min-height: 260px;
          border: 0;
          display: block;
          filter: grayscale(.1) contrast(1.05) saturate(.9)
}

.info-box {
          text-align: left;
          display: flex;
          flex-direction: column;
          justify-content: center;
          gap: 14px
}

.info-box strong {
          display: block;
          font-size: 18px;
          letter-spacing: .08em;
          text-transform: uppercase
}

.info-box p {
          margin: 0;
          line-height: 1.8
}

.map-btn {
          display: inline-block;
          margin-top: 8px;
          padding: 10px 15px;
          border: 1px solid rgba(112, 72, 63, .65);
          border-radius: 999px;
          background: var(--hero-gradient);
          color: var(--brown);
          text-decoration: none;
          letter-spacing: .12em;
          text-transform: uppercase;
          font-size: 12px;
          width: fit-content;
          box-shadow: 0 8px 20px rgba(112, 72, 63, .14);
          transition: filter .25s ease, box-shadow .25s ease
}

.rsvp {
          background: #f7ded4;
          max-width: none;
          overflow: hidden;
          max-height: 2000px;
          transition: max-height .8s ease, opacity .6s ease, padding .8s ease
}

.rsvp.collapsed {
          max-height: 0;
          opacity: 0;
          padding-top: 0;
          padding-bottom: 0;
          pointer-events: none
}

.rsvp-form-area {
          position: relative;
          max-width: 520px;
          margin: 30px auto 0
}

#rsvp-form {
          transition: opacity .5s ease, transform .5s ease
}

#rsvp-form.hide {
          opacity: 0;
          transform: translateY(-12px) scale(.97);
          pointer-events: none;
          position: absolute;
          inset: 0
}

.rsvp-success {
          position: relative;
          display: none;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          padding: 40px 0;
          overflow: hidden
}

.rsvp-success.visible {
          display: flex
}

.rsvp-success-heart {
          width: 72px;
          height: 72px;
          overflow: visible
}

.heart-path {
          fill: var(--gold);
          fill-opacity: 0;
          stroke: var(--gold);
          stroke-width: 1.2;
          stroke-dasharray: 100;
          stroke-dashoffset: 100;
          transform-box: fill-box;
          transform-origin: center;
          animation: drawHeart 1s ease forwards, fillHeart .5s ease forwards 1s, heartbeat 1.1s ease-in-out infinite 1.5s
}

.rsvp-success-text {
          margin-top: 14px;
          font-size: 20px;
          letter-spacing: .04em;
          color: var(--brown)
}

.rsvp-confetti-heart {
          position: absolute;
          bottom: 0;
          font-size: 20px;
          color: var(--gold);
          opacity: 0;
          animation: floatUpHeart 2.2s ease-in forwards
}

@keyframes heartbeat {

          0%,
          100% {
                    transform: scale(1)
          }

          25% {
                    transform: scale(1.15)
          }

          50% {
                    transform: scale(1)
          }

          75% {
                    transform: scale(1.1)
          }
}

@keyframes drawHeart {
          to {
                    stroke-dashoffset: 0
          }
}

@keyframes fillHeart {
          to {
                    fill-opacity: 1
          }
}

@keyframes floatUpHeart {
          0% {
                    opacity: 0;
                    transform: translateY(0) scale(.6) rotate(0deg)
          }

          15% {
                    opacity: 1
          }

          100% {
                    opacity: 0;
                    transform: translateY(-180px) scale(1) rotate(20deg)
          }
}

.rsvp-toast {
          position: absolute;
          left: 50%;
          bottom: calc(100% + 4px);
          z-index: 110;
          width: max-content;
          max-width: calc(100vw - 48px);
          padding: 16px 20px;
          border: 1px solid #b77a5f;
          background: #fffaf7;
          color: var(--brown);
          box-shadow: 0 8px 24px rgba(112, 72, 63, .18);
          opacity: 0;
          transform: translate(-50%, 16px);
          pointer-events: none;
          transition: opacity .25s ease, transform .25s ease
}

.rsvp-toast.visible {
          opacity: 1;
          transform: translate(-50%, 0)
}

.rsvp-toast.error {
          border-color: #a64b42;
          background: #fff1ee
}

.rsvp-guests-field.hide {
          display: none
}

.honeymoon-gift {
          text-align: center;
          background: var(--cream);
          max-width: none
}

.honeymoon-gift p {
          max-width: 620px;
          margin: 0 auto 14px;
          line-height: 1.8;
          font-size: 18px
}

.iban-box {
          max-width: 620px;
          margin: 28px auto 0;
          padding: 18px 24px;
          border: 1px solid #ddb6a8;
          background: #fffaf7
}

.iban-box span {
          display: block;
          margin-bottom: 8px;
          color: var(--brown);
          font-size: 13px;
          letter-spacing: .18em;
          text-transform: uppercase
}

.iban-box strong {
          display: block;
          color: var(--brown);
          font-size: clamp(17px, 2vw, 20px);
          letter-spacing: .08em;
          overflow-wrap: anywhere
}

.toast-message {
          max-width: 620px;
          margin: 22px auto 0;
          font-style: italic;
          color: var(--brown);
          font-size: 17px;
          letter-spacing: .02em
}

.toast-emoji {
          display: block;
          width: 28px;
          height: 28px;
          margin: 10px auto 0
}

form {
          max-width: 520px;
          margin: 0 auto;
          display: grid;
          gap: 12px
}

input,
textarea,
select {
          width: 100%;
          padding: 15px;
          border: 1px solid #ddb6a8;
          background: #fffaf7;
          font: inherit;
          color: var(--brown)
}

button {
          border: 0;
          cursor: pointer
}

footer {
          text-align: center;
          padding: 50px 20px;
          background: #f1cfc1
}

footer .names {
          font-size: 32px;
          font-style: italic
}

@media(min-width:1000px) {
          body {
                    font-size: 20px
          }

          .section-kicker {
                    font-size: 16px
          }

          h2 {
                    font-size: 42px
          }

          .story,
          .honeymoon-gift p {
                    font-size: 23px
          }

          .card h3 {
                    font-size: 27px
          }

          .time small {
                    font-size: 13px
          }

          .btn,
          .map-btn {
                    font-size: 15px
          }

          .iban-box strong {
                    font-size: 22px
          }

          footer .names {
                    font-size: 36px
          }
}

@media(max-width:600px) {

          .cards,
          .location-wrap {
                    grid-template-columns: 1fr
          }

          .card {
                    min-height: auto
          }

          .gallery {
                    grid-template-columns: repeat(2, minmax(0, 1fr));
                    gap: 12px
          }

          section {
                    padding: 21px 20px
          }

          .honeymoon-gift p {
                    font-size: 17px
          }

          .open-invite-btn {
                    bottom: 4vh
          }

          .eyebrow {
                    font-size: 13px
          }

          .gallery-overlay span {
                    font-size: 15px
          }

          .witnesses {
                    grid-template-columns: 1fr;
                    justify-items: center
          }

          .witnesses-label,
          .witness {
                    grid-row: auto;
                    grid-column: 1
          }

          .witnesses-label-bride {
                    order: 1
          }

          .witness:nth-of-type(1) {
                    order: 2
          }

          .witnesses-label-groom {
                    order: 3;
                    margin-top: 20px
          }

          .witness:nth-of-type(2),
          .witness:nth-of-type(3) {
                    order: 4
          }
}

@media (min-width:601px) and (max-height:720px) {
          .hero {
                    padding-block: 24px
          }

          .eyebrow {
                    margin-block: 12px
          }

          .date {
                    margin-block: 10px 18px
          }
}