#whoIsThisFor.backgroundAnimation {
  background: rgb(0, 0, 0);
  background: linear-gradient(
    var(--angle),
    rgba(0, 0, 0, 0) 25%,
    rgba(255, 229, 247) 100%
  );
  animation: backgroundColor 1s linear forwards;
}

#whoIsThisFor .content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

#whoIsThisFor .whoIsThisFor-list {
  justify-self: flex-start;
  list-style-type: none;
  display: grid;
  grid-template-rows: repeat(5, 50px);
  row-gap: 20px;
}

#whoIsThisFor .whoIsThisFor-list li {
  display: grid;
  opacity: 0;
}

#whoIsThisFor .showListingAnimation:nth-child(1) {
  animation: showListing calc(var(--textAnimationTiming)) forwards
      cubic-bezier(0.39, 0.25, 0.58, 0.58) var(--sectionTitleAnimationTiming),
    fadeInText var(--textAnimationTiming)
      calc(
        var(--sectionTitleAnimationTiming) +
          calc(var(--textAnimationTiming) * 6.2)
      )
      forwards;
}

#whoIsThisFor .showListingAnimation:nth-child(2) {
  animation: showListing calc(var(--textAnimationTiming)) forwards
      cubic-bezier(0.39, 0.25, 0.58, 0.58) var(--sectionTitleAnimationTiming),
    fadeInText var(--textAnimationTiming)
      calc(
        var(--sectionTitleAnimationTiming) +
          calc(var(--textAnimationTiming) * 4.65)
      )
      forwards;
}

#whoIsThisFor .showListingAnimation:nth-child(3) {
  animation: showListing calc(var(--textAnimationTiming)) forwards
      cubic-bezier(0.39, 0.25, 0.58, 0.58) var(--sectionTitleAnimationTiming),
    fadeInText var(--textAnimationTiming)
      calc(
        var(--sectionTitleAnimationTiming) +
          calc(var(--textAnimationTiming) * 3.1)
      )
      forwards;
}

#whoIsThisFor .showListingAnimation:nth-child(4) {
  animation: showListing calc(var(--textAnimationTiming)) forwards
      cubic-bezier(0.39, 0.25, 0.58, 0.58) var(--sectionTitleAnimationTiming),
    fadeInText var(--textAnimationTiming)
      calc(
        var(--sectionTitleAnimationTiming) +
          calc(var(--textAnimationTiming) * 1.55)
      )
      forwards;
}

#whoIsThisFor .showListingAnimation:nth-child(5) {
  animation: showListing calc(var(--textAnimationTiming)) forwards
      cubic-bezier(0.39, 0.25, 0.58, 0.58) var(--sectionTitleAnimationTiming),
    fadeInText var(--textAnimationTiming)
      calc(
        var(--sectionTitleAnimationTiming) +
          calc(var(--textAnimationTiming) * 0)
      )
      forwards;
}

#whoIsThisFor .whoIsThisFor-list li > h4 {
  grid-column: 3;
  font-size: inherit;
}

#whoIsThisFor .content-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  opacity: 0;
  margin: auto 0;
}

#whoIsThisFor .content-footer.fadeUpAnimation {
  animation: fadeIn var(--textAnimationTiming) linear forwards;
  animation-delay: var(--sectionTitleAnimationTiming);
}

@keyframes showListing {
  0% {
    font-size: var(--whoListingFontSizeMax);
    line-height: var(--whoListingLineHeightMax);
    font-size: clamp(19px, 2.5dvw, var(--whoListingFontSizeMax));
    line-height: clamp(26.62px, 2.5dvw, var(--whoListingLineHeightMax));
    opacity: 1;
    transform: translateY(20px);
    grid-template-columns: 0% 50px 100%;
  }

  25% {
    font-size: var(--whoListingFontSizeMax);
    line-height: var(--whoListingLineHeightMax);
    font-size: clamp(19px, 2.5dvw, var(--whoListingFontSizeMax));
    line-height: clamp(26.62px, 2.5dvw, var(--whoListingLineHeightMax));
    opacity: 1;
    transform: translateY(10px);
    grid-template-columns: 0% 50px 100%;
  }

  50% {
    font-size: var(--whoListingFontSizeMax);
    line-height: var(--whoListingLineHeightMax);
    font-size: clamp(19px, 2.5dvw, var(--whoListingFontSizeMax));
    line-height: clamp(26.62px, 2.5dvw, var(--whoListingLineHeightMax));
    opacity: 1;
    transform: translateY(10px);
    grid-template-columns: 0% 50px 100%;
  }

  100% {
    font-size: var(--whoListingFontSizeMin);
    line-height: var(--whoListingLineHeightMin);
    font-size: clamp(19px, 2.5dvw, var(--whoListingFontSizeMin));
    line-height: clamp(26.62px, 2.5dvw, var(--whoListingLineHeightMin));
    opacity: 0.5;
    transform: translateY(0px);
    grid-template-columns: 35% 50px calc(65%);
  }
}

@keyframes fadeInText {
  from {
    opacity: 0.5;
  }
  to {
    opacity: 1;
  }
}

@media screen and (max-width: 960px) {
  #whoIsThisFor .whoIsThisFor-list li {
    grid-template-columns: 100%;
  }
  #whoIsThisFor .whoIsThisFor-list li > h4 {
    grid-column: 1;
  }

  @keyframes showListing {
    0% {
      font-size: var(--whoListingFontSizeMax);
      line-height: var(--whoListingLineHeightMax);
      font-size: clamp(19px, 2.5dvw, var(--whoListingFontSizeMax));
      line-height: clamp(26.62px, 2.5dvw, var(--whoListingLineHeightMax));
      opacity: 1;
      transform: translateY(20px);
    }

    25% {
      font-size: var(--whoListingFontSizeMax);
      line-height: var(--whoListingLineHeightMax);
      font-size: clamp(19px, 2.5dvw, var(--whoListingFontSizeMax));
      line-height: clamp(26.62px, 2.5dvw, var(--whoListingLineHeightMax));
      opacity: 1;
      transform: translateY(10px);
    }

    50% {
      font-size: var(--whoListingFontSizeMax);
      line-height: var(--whoListingLineHeightMax);
      font-size: clamp(19px, 2.5dvw, var(--whoListingFontSizeMax));
      line-height: clamp(26.62px, 2.5dvw, var(--whoListingLineHeightMax));
      opacity: 1;
      transform: translateY(10px);
    }

    100% {
      font-size: var(--whoListingFontSizeMin);
      line-height: var(--whoListingLineHeightMin);
      font-size: clamp(19px, 2.5dvw, var(--whoListingFontSizeMin));
      line-height: clamp(26.62px, 2.5dvw, var(--whoListingLineHeightMin));
      opacity: 0.5;
      transform: translateY(0px);
    }
  }
}

@media screen and (max-height: 667px) {
  #whoIsThisFor .content {
    gap: 0px;
  }
}

@media screen and (max-width: 450px) {
  #whoIsThisFor .header {
    display: flex;
  }

  #whoIsThisFor .whoIsThisFor-list {
    padding-top: 0px;
    /* grid-template-rows: repeat(5, 5dvh); */
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  #whoIsThisFor .content-footer {
    gap: 0px;
  }

  #whoIsThisFor .content-footer h2 {
    font-size: 21px;
  }

  @keyframes showListing {
    from {
      opacity: 0;
      transform: translateY(20px);
    }

    to {
      opacity: 0.5;
      transform: translateY(0px);
    }
  }
}