#hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  padding: 13rem 0 6rem 0;
  background-color: var(--primary-color);
}

#hero .hero-image img, #hero .hero-image {
  object-fit: contain;
  width: clamp(1rem, 100%, 38rem);
  max-height: 30rem;
  height: auto;
  border-radius: 48px;
}

#hero .keywords {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  color: var(--light-citron);
}

#hero .keywords span {
  background-color: var(--accent-color);
  color: white;
  border-radius: 6px;
  padding: 8px 12px;
  font-family: Quicksand, sans-serif;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 400;
  line-height: 120%; /* 24px */
}

#hero .publication-infos {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  color: var(--light-citron);
}

#hero h1, #hero h2 {
  width: clamp(33rem, 70%, 66rem);
  text-align: center;
}

#hero h1 {
  color: var(--light-citron);
  text-align: center;
  font-family: Quicksand, sans-serif;
  font-size: 64px;
  font-style: normal;
  font-weight: 300;
  line-height: 100%; /* 64px */
  letter-spacing: -3.2px;
}

#hero h2 {
  color: var(--medium-grey);
  text-align: center;
  font-family: Urbanist, sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%; /* 26px */
}

#hero .publication-infos {
  color: var(--medium-grey);
  font-family: Quicksand, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 120%; /* 19.2px */
  text-transform: uppercase;
}

.article {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 6rem 15.875rem;
}

.share-cta {
  background-color: var(--accent-color);
  display: flex;
  flex-direction: column;
  gap: 4.5rem;
  padding: 6rem 15.875rem 11rem 15.875rem;
  margin-bottom: -5rem;
  border-radius: 32px 32px 0 0;
}

.share-cta .title {
  color: var(--secondary-color);
  text-align: center;
  font-family: Quicksand, sans-serif;
  font-size: 4rem;
  font-style: normal;
  font-weight: 300;
  line-height: 100%; /* 64px */
  letter-spacing: -3.2px;
}

.share-cta .accent-text {
  color: var(--secondary-color);
  font-family: Urbanist, sans-serif;
  font-size: 4rem;
  font-style: italic;
  font-weight: 500;
  line-height: 100%;
  letter-spacing: -3.2px;
}

.share-cta .social_links {
  display: flex;
  gap: 1.5rem;
  padding: 0;
  list-style: none;
  align-items: center;
  justify-content: center;
}

.share-cta .social_links a, .share-cta .social_links button {
  text-decoration: none;
  border: 1px solid var(--secondary-color);
  border-radius: 50%;
  padding: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  background: none;
}


.share-cta .social_links a:hover, .share-cta .social_links button:hover {
  background: rgba(0, 0, 0, 0.20);
}

@media (max-width: 800px) {
  #hero {
    padding: 12rem 2.375rem 4rem 2.375rem;
    gap: 2rem;
  }

  #hero h1 {
    font-size: 48px;
    font-style: normal;
    font-weight: 300;
    line-height: 100%; /* 48px */
    letter-spacing: -2.4px;
    width: 100%;
  }

  #hero .summary {
    text-align: center;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 26px */
  }

  #hero h2 {
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 26px */
    width: 100%;
  }

  .article {
    padding: 6rem .75rem;
  }

  .share-cta {
    padding: 4rem 1.5rem 9rem 1.5rem;
    gap: 3rem;
  }

  .share-cta .title {
    font-size: 32px;
    font-style: normal;
    font-weight: 300;
    line-height: 100%; /* 32px */
    letter-spacing: -1.6px;
  }

  .share-cta .accent-text {
    font-size: 32px;
    font-style: italic;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: -1.6px;
  }

  .share-cta .social_links a {
    padding: 1rem;
  }
}