/* ----------------   SLOGAN   -------------- */
.hero--slogan {
   color: #fff;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 0.5rem;
}

.hero--slogan>p {
   font-weight: 600;
   font-family: var(--font-title);
   letter-spacing: 2px;
   text-transform: uppercase;
   color: currentColor;
   padding: 0 1rem;
   -webkit-box-decoration-break: clone;
   box-decoration-break: clone;
   background: linear-gradient(to right bottom, rgba(238, 198, 96, 0.7), rgba(147, 104, 25, 0.7));
   -webkit-backdrop-filter: blur(10px);
   backdrop-filter: blur(10px);
   transform: translateX(0);
}

.hero--slogan>p:first-child {
   -webkit-animation: moveTextLeft 1.5s ease-in-out 1s;
   animation: moveTextLeft 1.5s ease-in-out 1s;
   -webkit-animation-fill-mode: backwards;
   animation-fill-mode: backwards;
}

.hero--slogan>p:last-child {
   align-self: flex-end;
   -webkit-animation: moveTextRight 1.5s ease-in-out 1s;
   animation: moveTextRight 1.5s ease-in-out 1s;
   -webkit-animation-fill-mode: backwards;
   animation-fill-mode: backwards;
}

@media(min-width: 25rem) {
   .hero--slogan {
      align-items: center;
   }

   .hero--slogan>p:first-child {
      transform: translateX(-20%);
      -webkit-animation: moveTextLeft2 1.5s ease-in-out 1s;
      animation: moveTextLeft2 1.5s ease-in-out 1s;
      -webkit-animation-fill-mode: backwards;
      animation-fill-mode: backwards;
   }

   .hero--slogan>p:last-child {
      align-self: center;
      transform: translateX(45%);
      -webkit-animation: moveTextRight2 1.5s ease-in-out 1s;
      animation: moveTextRight2 1.5s ease-in-out 1s;
      -webkit-animation-fill-mode: backwards;
      animation-fill-mode: backwards;
   }
}

/* ---   35 rem */
@media(min-width: 35rem) {
   .hero--slogan>p {
      font-size: 1.1rem;
   }
}

/* ---   66 rem */
@media(min-width: 66rem) {

   .hero--slogan>p {
      font-size: 1.2rem;
   }
}