#volantino_BF {}
#volantino_BF_corpo{
    background:#FFF;
    padding-bottom:25px;
}
#volantino_BF_testata{
	margin-bottom:25px;
}
#volantino_BF_elementi{ background:#FFF; }
#volantino_BF_elementi:after{ content:''; display:block; clear:both; }

#corpo_centrale_colonna_dx #volantino_BF_testata {
  margin-left: -30px;
  margin-right: -30px;
}

#corpo_centrale_colonna_dx #volantino_BF_testata img {
  display: block;
  width: calc(100% + 60px); /* 2 * 30px */
  height: auto;
}

/* Card base */
.volantino_BF_elemento{
    box-sizing:border-box;
    padding:10px;
    margin:0 0 20px 0;   /* solo margine sotto */
    background:#FFF;
    /* opzionali: bordo/ombra come nelle card di categoria
    border:1px solid #e5e5e5;
    box-shadow:0 2px 6px rgba(0,0,0,0.05);
    border-radius:6px;
    */
}
.volantino_BF_elemento img{
    width:100%;
    height:auto;
    display:block;
    border:0;
}

/* === DESKTOP: 5 per riga con le MISURE richieste === */
@media screen and (min-width:1200px){
    .volantino_BF_elemento{
        float:left;
        /*width:19.2%;
        margin-right:1%;*/   /* spazio tra card */
        text-align:center;
    }
    .volantino_BF_elemento:nth-child(6n){     /* ultimo della riga */
        margin-right:0;
    }
    .volantino_BF_elemento:nth-child(6n+1){   /* primo della riga */
        clear:left;
    }
}

/* Desktop medi (fallback 4 per riga) */
@media screen and (min-width:939px) and (max-width:1199px){
    .volantino_BF_elemento{
        float:left;
        width:24%;
        margin-right:1%;
        text-align:center;
    }
    .volantino_BF_elemento:nth-child(4n){ margin-right:0; }
    .volantino_BF_elemento:nth-child(4n+1){ clear:left; }
}

/* Tablet: 3 per riga */
@media screen and (min-width:601px) and (max-width:938px){
    .volantino_BF_elemento{
        float:left;
        width:32.3333%;   /* 3*32.3333 + 2*1 = 99% */
        margin-right:1%;
        text-align:center;
    }
    .volantino_BF_elemento:nth-child(3n){ margin-right:0; }
    .volantino_BF_elemento:nth-child(3n+1){ clear:left; }
}

/* Smartphone: 2 per riga */
@media screen and (max-width:600px){
    .volantino_BF_elemento{
        float:left;
        width:49%;
        margin-right:2%;
        text-align:center;
    }
    .volantino_BF_elemento:nth-child(2n){ margin-right:0; }
    .volantino_BF_elemento:nth-child(2n+1){ clear:left; }
}

/* --- GRID A CARD CENTRATE --- */
#volantino_BF_corpo{
  background:#FFF;
  padding-bottom:25px;

  /* nuovo: layout a griglia fluido e centrato */
  display:flex;
  flex-wrap:wrap;
  justify-content:center;  /* qui le centri */
  gap:20px;                /* spazio orizzontale/verticale tra card */
}

/* stile base card (copre sia .classe sia l'id usato ripetuto) */
.volantino_BF_elemento,
#volantino_BF_elemento{
  box-sizing:border-box;
  padding:10px;
  background:#FFF;
}

/* immagine full width */
.volantino_BF_elemento img,
#volantino_BF_elemento img{
  width:100%;
  height:auto;
  display:block;
  border:0;
}

/* === Desktop grande: 5 per riga === */
@media (min-width:1200px){
  .volantino_BF_elemento,
  #volantino_BF_elemento{
    flex: 0 1 calc((100% - 4*20px)/5); /* 5 colonne con gap */
    text-align:center;
  }
}

/* === 939–1199: 4 per riga === */
@media (min-width:939px) and (max-width:1199px){
  .volantino_BF_elemento,
  #volantino_BF_elemento{
    flex: 0 1 calc((100% - 3*20px)/4);
    text-align:center;
  }
}

/* === 601–938: 3 per riga === */
@media (min-width:601px) and (max-width:938px){
  .volantino_BF_elemento,
  #volantino_BF_elemento{
    flex: 0 1 calc((100% - 2*20px)/3);
    text-align:center;
  }
}

/* === <=600: 2 per riga === */
@media (max-width:600px){
  .volantino_BF_elemento,
  #volantino_BF_elemento{
    flex: 0 1 calc((100% - 1*20px)/2);
    text-align:center;
  }
}

/* --- default (mobile) --- */
#corpo_centrale_colonna_dx #volantino_BF_testata{
  margin-left: 0;
  margin-right: 0;
}
#corpo_centrale_colonna_dx #volantino_BF_testata img{
  display:block;
  width:100%;
  height:auto;
}

/* --- desktop: annulla i 30px di padding del padre --- */
@media (min-width: 801px){ /* o la tua soglia desktop */
  #corpo_centrale_colonna_dx #volantino_BF_testata{
    margin-left: -30px;
    margin-right: -30px;
  }
  #corpo_centrale_colonna_dx #volantino_BF_testata img{
    width: calc(100% + 60px);
  }
}