#story {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 1rem 1rem 4rem 1rem;
  font-family: "Helvetica Neue", Arial, sans-serif;
  color: #606060;
  text-align: center;
  

  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin-bottom: 0; /* opcional, mas remove o espaçamento extra */
}


/* Envoltorio circular */
.story-image-wrapper {
  width: 250px;        /* ajuste o tamanho que desejar */
  height: 250px;       /* mesmo valor de width para ser um círculo perfeito */
  border-radius: 100%;  /* torna o elemento um círculo */

}

/* Imagem dentro do círculo */
.story-image-wrapper img {
  width: 100%;         /* ocupa todo o wrapper */
  height: 100%;        /* ocupa todo o wrapper */
  object-fit: cover;   /* preenche, cortando as partes extras */
  display: block;      /* remove gaps indesejados */
}


/* TITULO E SUBTÍTULO */
#story h2 {
  font-family: "Playfair Display", serif;
  font-size: 2rem;
  margin-bottom: 0.5rem;
  color: #302f2f;
}

#story h3 {
  font-family: "Playfair Display", serif;
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
  color: #302f2f;
}

#story > p {
  font-size: 1rem;
  line-height: 1.6;
  color: #3e3e3e;
  margin-bottom: 3rem;
}

/* GRID PRINCIPAL */
.story-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2rem; /* espaçamento entre os blocos */
  text-align: center;
}

.story-grid > div {
  flex: 1 1 200px; /* torna os blocos flexíveis */
  max-width: 300px; /* limita o tamanho dos blocos */
}

.container {
  box-shadow: none;
  border: none;
}

.quote-section {
  padding-bottom: 0;
}

.quote-section {
  margin-bottom: 0;
  padding-bottom: 0;
}