body {
  background-color: white;
}

#hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4rem;
  padding: 13rem clamp(1.5rem, 17%, 15.875rem) 6rem clamp(1.5rem, 17%, 15.875rem);
  background-color: white;
}

#hero .title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}

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

#hero .keywords {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
}

#hero .keywords span {
  background-color: var(--primary-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 h1, #hero h2 {
  /*width: clamp(33rem, 70%, 66rem);*/
  text-align: center;
}

#hero h1 {
  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 {
  text-align: center;
  font-family: Urbanist, sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%; /* 26px */
}

.main-content {
  display: flex;
  flex-direction: column;
  padding: 6rem clamp(1.5rem, 17%, 15.875rem);
  background-color: var(--secondary-color);
  gap: 2rem;
}

.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 {
  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;
}

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

}

/*figure {*/
/*  margin: 0;*/
/*  width: 100%;*/
/*  position: relative;*/
/*  overflow-x: auto;*/
/*}*/

/*figure ul {*/
/*  display: flex;*/
/*  gap: 1rem;*/
/*  list-style: none;*/
/*  padding: 0;*/
/*  margin: 0;*/
/*  flex-wrap: nowrap;*/
/*  width: max-content;*/
/*}*/

/*figure ul li {*/
/*  max-height: 20rem;*/
/*  max-width: 20rem;*/
/*}*/

@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%;
  }

  .main-content {
    gap: 4rem;
    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;
  }
}