/* new below  */

.voting {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.vote-btn {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--color-neutral-4);
  border-radius: 0.25rem;
  background: var(--color-neutral-9);
  cursor: pointer;
}

.vote-btn:hover {
  background: var(--color-neutral-8);
}

.vote-btn.upvote.active {
  color: var(--color-color-9);
  border-color: var(--color-color-9);
}

.vote-btn.downvote.active {
  color: var(--color-color-11);
  border-color: var(--color-color-11);
}

.vote-count {
  font-weight: 500;
}

.vote-icon {
  font-size: 0.875rem;
}
.grid-list {
  margin: 0; 
  padding: 0;
  list-style-type: none;

  /* li {
    display: flex;
    flex-direction: column;
  }
  
  li * {
    margin-top: 1em;
  } */
}

.ho-cta-left {
  background: url("/public/images/home/ahAVMa6fwW1vDN.jpg") no-repeat;
  background-size: cover;
  background-position: 30% center;
  min-height: 60rem;
}

.hl {
  text-shadow: 0px 0px 2px var(--color-neutral-10);
  color: var(--color-light-neutral-10);

  span {
    color: var(--color-color-2);
    font-size: inherit;
  }
}

.ho-usp-element .hl {
  color: var(--color-neutral-1);
}

.story {
  h1 {
    margin: 0;
    line-height: 0;
  }

  img {
    width: auto;
    margin: var(--space-m) auto;
  }

  p {
    text-wrap: unset;
  }
}

.ex-pictures ul li {
  padding: 0;
}

.ex-pictures ul li {
  width: 25rem;
}

.ex-pictures li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.section {
  row-gap: var(--space-xl);
}

.section figure figcaption {
  position: absolute;
  bottom: -5rem;
  z-index: 1;
  width: 100%;
  text-align: center;
  text-wrap: balance;
  left: 0;
  right: 0;
}

.section .ho-header-with-background {
  overflow: visible;
}