@media (max-width: 900px) {

  .hero {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-text h1 {
    font-size: 3rem;
  }

  .topics {
    grid-template-columns: 1fr 1fr;
  }

  nav {
    display: none;
  }

}

@media (max-width: 600px) {

  .topics {
    grid-template-columns: 1fr;
  }

  .hero {
    padding-top: 3rem;
  }

}
.hero-image img {

  width: 100%;

  max-width: 850px;

  transform: none;

}

.story-navigation {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 5% 8%;

}

.nav-story {

  text-decoration: none;

  background: white;

  padding: 1rem 2rem;

  border-radius: 50px;

  color: var(--text);

  transition: 0.3s ease;

}

.nav-story:hover {

  transform: translateY(-5px);

  background: var(--orange);

  color: white;

}

@media (max-width: 900px) {

  .esi-hero {

    grid-template-columns: 1fr;

  }

  .esi-grid {

    grid-template-columns: 1fr;

  }

  .esi-text h1 {

    font-size: 3.5rem;

  }

  .big-quote h2,
  .purpose-text h2,
  .question-section h2 {

    font-size: 2.5rem;

  }

}

@media (max-width: 900px) {

  .changes-hero,
  .changes-grid {

    grid-template-columns: 1fr;

  }

  .changes-text h1,
  .narrative-break h2,
  .question-block h2,
  .ending-text p {

    font-size: 2.8rem;

  }

}

@media (max-width: 900px) {

  .emotion-content h1,
  .emotion-center h2,
  .emotion-question h2,
  .soft-ending h2 {

    font-size: 3rem;

  }

  .emotion-cards {

    grid-template-columns: 1fr;

  }

  .floating-thoughts {

    height: auto;

    display: flex;

    flex-direction: column;

    gap: 1rem;

    padding: 0 8%;

  }

  .thought {

    position: static;

  }

}

@media (max-width: 900px) {

  .consent-hero,
  .consent-grid {

    grid-template-columns: 1fr;

  }

  .consent-text h1,
  .safe-quote h2,
  .consent-question h2,
  .consent-ending h2 {

    font-size: 3rem;

  }

}

@media (max-width: 900px) {

  .relations-text h1,
  .relation-quote h2,
  .relations-ending h2 {

    font-size: 3rem;

  }

  .relationship-collage {

    grid-template-columns: 1fr;

  }

  .visual-content img {

    width: 100%;

  }

  .visual-text {

    position: static;

    margin-top: 1rem;

    max-width: 100%;

  }

}

@media (max-width: 900px) {

  .help-hero h1,
  .coming-box h2,
  .final-ending h2 {

    font-size: 3rem;

  }

  .help-grid {

    grid-template-columns: 1fr;

  }

}