body {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  padding: 5px 0;
  padding-top: 150px;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

/* === IMMAGINE PRINCIPALE (HERO) === */ 
body > img { 
  display: block; /* rimuove spazi indesiderati */ 
  width: 75%; /* immagine sempre responsive */ 
  max-width: 700px; /* limite estetico */ 
  margin: 0; /* centrata + spazio sotto */ 
  border-radius: 10px; /* angoli morbidi */ 
  object-fit: cover; 
  filter: grayscale(100%);
  transition: filter 0.8s ease, transform 0.8s ease;   
}

/* Hover: torna a colori e si ingrandisce leggermente */
body > img:hover {
  filter: grayscale(0%);     /* rimuove il filtro → immagine a colori */
  transform: scale(1.0);     /* leggero ingrandimento */
}

body > img:active {
  filter: grayscale(0%);
  transform: scale(1.02);
}

h4 {
  font-family: 'Poppins', sans-serif;
  font-style: italic;
  font-size: 0.9rem;
  font-weight: 200;
  text-align: right;
  line-height: 1.6; 
  margin-bottom: 10px;
  width: 65%; /* occupa metà della larghezza */ 
  margin-left: auto; /* spinge il blocco verso destra */ 
  text-align: right; /* testo allineato a destra */
}

p {
  margin: 0;
}

.architect {
  text-align: right; 
  font-style: normal; 
  font-weight: 400; 
  margin-top: 5px;
}

/* === RESPONSIVE === */ 
@media (max-width: 1100px) { 
  body { 
    padding-left: 5px; 
    padding-right: 5px; 
  } 
}

@media (max-width: 700px) { 
  body { 
    padding-top: 150px; /* header più vicino su mobile */ 
    padding-left: 5px; 
    padding-right: 5px;
  } 
  
  body > img { 
    width: 100%;
    max-width: 100%; /* immagine più grande su mobile */ 
    margin: 0 auto; /* ← centra l’immagine */ 
    display: block;
    margin-bottom: 30px; 
  } 
  h4 { 
    font-size: 1rem; 
  } 
}