.banner {
     aspect-ratio: 16/9;
     background: url('/wp-content/uploads/save-the-date-banner-desktop-upscale.jpg');
     background-position: center 60px;
     background-repeat: no-repeat;
     background-size: cover;
     display: flex;
     flex-flow: column nowrap;
     justify-content: flex-start;
     align-items: center;
     height: auto;
     margin-top: -30px;
     padding-top: 255px;
     width: 100%;

     h1 {
          color: var(--PrimaryColor);
          display: flex;
          flex-flow: row nowrap;
          justify-content: center;
          align-items: flex-end;
          gap: 60px;
          font-size: 80px;
          line-height: 1em;
          letter-spacing: 20px;
          margin-bottom: 20px;
          margin-top: 20px;
          text-transform: uppercase;

          span {
               color: var(--SecondaryColor);
               display: block;
               font-family: var(--CursiveFont);
               font-size: 64px;
               letter-spacing: 0px;
               line-height: 1em;
               padding-top: 18px;
               text-transform: lowercase;
          }
     }
     h2 {
          color: var(--PrimaryColor);
          font-size: 110px;
          font-family: var(--CursiveFont);
          line-height: 1em;
          margin-bottom: 45px;
     }
     h3 {
          color: var(--PrimaryColor);
          font-size: 30px;
          font-weight: 600;
          line-height: 1em;
          letter-spacing: 10px;
          margin-bottom: 15px;          
          text-transform: uppercase;

          span {
               font-size: 46px;
               font-weight: 500;
          }
     }
     h4 {
          color: var(--PrimaryColor);
          font-size: 25px;
          font-weight: 600;
          letter-spacing: 10px;
          line-height: 1.5em;
          margin: 0px;
          text-align: center;
          text-transform: uppercase;

          &:last-of-type {
               margin-bottom: 30px;
               padding-right: 15px;
          }
          span {
               color: var(--SecondaryColor);
               font-family: var(--CursiveFont);
               font-size: 30px;
               line-height: 1em;
               letter-spacing: 1px;
               text-transform: lowercase;

               &:first-of-type {
                    padding-right: 10px;
               }
               &:last-of-type {
                    color: var(--PrimaryColor);
                    padding-left: 10px;
               }
          }
     }
     h5 {
          color: var(--PrimaryColor);
          font-size: 15px;
          font-weight: 600;
          letter-spacing: 7px;
          line-height: 1.5em;
          margin-bottom: 10px;
          text-align: center;
          text-transform: uppercase;
     }
     img  {
          width: 190px;
          padding-right: 25px;
     }
     p {
          color: var(--PrimaryColor);
          font-family: var(--HeadFont);
          font-size: 15px;
          font-weight: 600;
          letter-spacing: 2px;
          text-transform: uppercase;
     }
     .divider {
          display: flex;
          align-items: center;
          gap: 16px;
          margin-bottom: 30px;

          &::before,
          &::after {
               content: '';
               display: block;
               flex: 1;
               height: 2px;
               background-color: var(--SecondaryColor);
               width: 90px;
          }
          & > div {
               border: 4px solid var(--SecondaryColor);
               height: 18px;
               flex-shrink: 0;
               transform: rotate(45deg);
               width: 18px;
          }
     }
}