/* Sezione 04 — tre gallerie a mosaico e il bottone tondo «Scopri le camere».
   Misure dagli stili calcolati a 1440px: la sezione e' alta 698.859px,
   il mosaico e' largo 1300.96px (tre colonne da 433.648px). */

.gallerie{
  position:relative;
  /* 4.1% di 1440px = 59.0391px */
  padding-left:4.1%;
}

.gallerie__mosaico{
  display:flex;
  align-items:flex-start;
  padding-top:40px;
  padding-right:80px;
}

.gallerie__colonna{
  width:33.333%;
}
.gallerie__colonna--prima{padding-right:54px}
.gallerie__colonna--seconda{
  /* la colonna centrale scende: e' lei a dare l'altezza alla sezione */
  margin-top:120px;
  padding-left:26px;
  padding-right:26px;
}
.gallerie__colonna--terza{padding-left:54px}

/* --------------------------------------------------------------- foto */
/* i 30px sotto ogni foto sono la gronda della griglia originale:
   entrano nell'altezza della sezione, quindi si conservano */
.gallerie__foto{margin-bottom:30px}
.gallerie__foto img{width:100%}

/* nella prima colonna la foto stacca di altri 20px prima del bottone */
.gallerie__colonna--prima .gallerie__foto{margin-bottom:50px}

/* ------------------------------------------------------------ bottone */
/* variante tonda di .bottone: disco verde che rimpicciolisce al passaggio */
.gallerie__bottone{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  width:145px;
  height:145px;
  /* risale di 85px e si sovrappone di 35px al bordo basso della foto */
  margin:-85px auto 0;
  padding:0;
  border:1px solid transparent;
  border-radius:50%;
  background:transparent;
  color:var(--bianco);
  font-size:12px;
  font-weight:500;
  line-height:18px;
  letter-spacing:1.2px;
  text-align:center;
}
.gallerie__bottone::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:50%;
  background:var(--accento);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.gallerie__bottone:hover{
  background:transparent;
  color:var(--bianco);
}
.gallerie__bottone:hover::before{transform:scale(.9)}

/* ---------------------------------------------------------- responsive */
@media (max-width:1024px){
  .gallerie{padding:40px 55px 0}
  .gallerie__mosaico{padding-top:0;padding-right:0}
  .gallerie__colonna--prima{padding-right:20px}
  .gallerie__colonna--seconda{
    margin-top:60px;
    padding-left:10px;
    padding-right:10px;
  }
  .gallerie__colonna--terza{padding-left:20px}
  .gallerie__bottone{width:150px;height:150px}
}

@media (max-width:768px){
  .gallerie{padding:30px 30px 0}
  /* si incolonna restando flex: cosi' i 30px sotto l'ultima foto
     restano dentro la sezione invece di scavalcarla */
  .gallerie__mosaico{
    flex-direction:column;
    align-items:stretch;
  }
  .gallerie__colonna{width:auto}
  .gallerie__colonna--prima{padding-right:0}
  .gallerie__colonna--seconda{
    margin-top:0;
    padding:50px 0 0;
  }
  .gallerie__colonna--terza{padding:20px 0 0}
  .gallerie__bottone{
    width:115px;
    height:115px;
    padding:10px;
    font-size:11px;
    line-height:16.5px;
    letter-spacing:1.1px;
  }
}