html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: serif;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Spinge il main al centro e il footer in fondo */
  align-items: center;
  background-color: #2E482A;
  
  /* Mantieni la tua bellissima foto di sfondo */
 /* background-image: url('foto/newsletter.png'); 
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  box-sizing: border-box;
  padding: 40px 20px;*/
}
footer {
  width: 100%;
  display: flex;
  justify-content: center; /* Centra il bottone in orizzontale */
  padding-top: 30px;
}

header h1 {
    text-align: center;
    color: orange;
    font-family: serif;
    font-size: 5rem;    /* Ingrandisce il testo. Puoi aumentare o diminuire questo valore (es. 4rem o 50px) */
    margin-top: 0;
    margin-bottom: 0;     /* Azzera il margine inferiore per evitare di spingere in giù i box sottostanti */
    padding-top: 20px;
    line-height: 1;       /* Mantiene compatta l'altezza invisibile del testo */
}

.bottone {
  position: relative;
  display: inline-block;
  padding: 15px 35px;
  border: 2px solid #FFA500;
  text-transform: uppercase;
  color: orange;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 1px;
}

.bottone::before {
  content: '';
  position: absolute;
  top: 6px;
  left: -2px;
  width: calc(100% + 4px);
  height: calc(100% - 12px);
  background-color: #161616; /* Colore che si sposa con lo sfondo del footer */
  transition: 0.3s ease-in-out;
  transform: scaleY(1);
}

.bottone:hover::before {
  transform: scaleY(0);
}

.bottone::after {
  content: '';
  position: absolute;
  left: 6px;
  top: -2px;
  height: calc(100% + 4px);
  width: calc(100% - 12px);
  background-color: #161616;
  transition: 0.3s ease-in-out;
  transform: scaleX(1);
  transition-delay: 0.2s;
}

.bottone:hover::after {
  transform: scaleX(0);
}

.bottone span {
  position: relative;
  z-index: 3;
}

/* 1. IL CONTENITORE: Forza esattamente 3 colonne con CSS Grid */
.contenitore-box {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Crea sempre 3 colonne identiche */
    gap: 25px;                             /* Spazio tra le polaroid */
    margin-top: 40px;
    max-width: 900px;                      /* Larghezza massima della griglia intera */
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
}

/* 2. LA POLAROID: Si adatta alla griglia invece di avere una larghezza fissa */
.box {
    background-color: #ffffff;  
    width: 100%;                           /* Ora occupa tutta la sua colonna */
    height: 100%;                          /* Si espande in base al contenuto */
    min-height: 310px;                     /* Mantiene un'altezza minima per sicurezza */
    padding: 12px 12px 20px 12px;   
    border-radius: 4px;  
	border: 3px solid orange;	
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); 
    box-sizing: border-box; 
    
    display: flex;
    flex-direction: column;         
    align-items: center;
    justify-content: flex-start;           /* Spinge il contenuto verso l'alto */
    
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
}

/* Effetto al passaggio del mouse (invariato) */
.box:hover {
    transform: translateY(-10px);             
    box-shadow: 0 15px 30px rgba(255, 165, 0, 0.4); 
}

/* La Foto dentro la Polaroid - MODIFICATA */
.box img {
    width: 100%;                           /* Prende tutta la larghezza interna */
    height: 220px;                         /* Altezza fissa del riquadro foto */ 
    /* --- LA MODIFICA È QUI --- */
    object-fit: contain;                   /* MOSTRA L'INTERA FOTO: La ridimensiona per farla entrare tutta senza tagliarla. Mantiene le proporzioni originali. */
    background-color: #f0f0f0;             /* OPZIONALE: Aggiunge uno sfondo grigio chiaro dietro l'immagine. */
                                           /* Se l'immagine è più stretta del riquadro, vedrai questo colore ai lati. Se è più bassa, lo vedrai sopra/sotto. */
    border: 1px solid #e0e0e0;      
    margin-bottom: 15px;            
}

/* Il Titolo Sottostante (invariato) */
.box h3 {
    color: orange;                                            
    font-size: 1.4rem;
    margin: 0;
    text-transform: uppercase;      
    letter-spacing: 1px;
    text-align: center;
}
a {
	border: none;
	text-decoration: none;
			
}