#more .more-header {
  font-family: New Hero ExtraBold;
}

#more .more-text {
  font-family: New Hero Thin;
  padding-right: 5%;
  pointer-events: auto;
}

#more .container .content {
  background-color: rgba(13, 33, 48, 0.85);
  border-radius: 6px;
  margin: 1rem 0;
  transition: transform 0.3s ease, height 0.3s ease;
}

/* Enlarged state */
#more .container .content.enlarged {
  transform: scale(1.05);
  height: 1.5em;
  margin: 2rem 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

#more .container .content.enlarged::before {
  background-size: cover;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  content: "";
  z-index: -1;
  background-repeat: no-repeat;
  animation: fadein 0.8s;
  opacity: 0.1;
}


#more .container #more-list {
  font-family: New Hero SemiBold;
}

#more .container #more-list span {
  font-family: New Hero Thin;
  font-size: .8em;
  text-indent: 2em;
}

#more .container #more-one.enlarged::before {
  background-image: var(--content-gradient),
    url("/assets/images/basics/why.jpg");
}

#more .container #more-two.enlarged::before {
  background-image: var(--content-gradient),
    url("/assets/images/basics/how.jpg");
  background-position: center;
  left: 30%;
}

#more .container #more-three.enlarged::before {
  background-position: center;
  background-image: var(--content-gradient),
    url("/assets/images/more/three.jpg");
}

#more .container #more-four.enlarged::before {
  background-position: right;
  background-image: var(--content-gradient),
    url("/assets/images/more/four.jpg");
}

#more .container #more-five.enlarged::before {
  background-position: center;
  background-image: var(--content-gradient),
    url("/assets/images/details/five.jpg");
}

#more .container #more-six.enlarged::before {
  background-position: center;
  background-image: var(--content-gradient),
    url("/assets/images/details/two.jpg");
}

#more .container #more-seven.enlarged::before {
  background-position: center;
  background-image: var(--content-gradient),
    url("/assets/images/details/one.jpg");
}

#more .container #more-eight.enlarged::before {
  background-position: center;
  background-image: var(--content-gradient),
    url("/assets/images/more/seven.jpg");
}

@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.1;
  }
}

/* Highlight animation */
@keyframes highlight {
  0% {
    background: linear-gradient(
      270deg,
      transparent 50%,
      var(--primary-color) 50%
    );
    background-size: 200% 100%;
    background-position: 100%;
    color: var(--pure-white);
  }
  100% {
    background: linear-gradient(
      270deg,
      transparent 50%,
      var(--primary-color) 50%
    );
    background-size: 200% 100%;
    background-position: 0%;
    color: var(--pure-white);
  }
}

.challenges-text span.highlight {
  animation: highlight 1s forwards;
}