/*-- Testo sopra l'immagine --*/
.caption {
    float:left;
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
}
.caption img {
    float: left;
    margin: 0;
    padding: 0;
    border: none;
}
.caption span {
    float: left;
    margin: 0;
    width: 90%;
    height:100%;
    color: #ffffff;
    position: absolute;
    padding-left:5%;
    padding-right:5%;
    left: 0%;
    bottom: 50%;
    align-content: center;
    align-items: center;
    vertical-align: middle;
    transform: translate(0%, 50%);
    display: flex;
    flex-direction: column;   /* ⬅️ QUESTA È LA CHIAVE */
    justify-content: center;  /* opzionale: centra in verticale */
}

.caption-hero {
    float:left;
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
}
.caption-hero img {
    float: left;
    margin: 0;
    padding: 0;
    border: none;
}
.caption-hero span {
    float: left;
    margin: 0;
    width: 50%;
    height:100%;
    color: #ffffff;
    position: absolute;
    padding-left:25%;
    padding-right:25%;
    left: 0%;
    bottom: 50%;
    align-content: center;
    align-items: center;
    vertical-align: middle;
    transform: translate(0%, 50%);
    display: flex;
    flex-direction: column;   /* ⬅️ QUESTA È LA CHIAVE */
    justify-content: center;  /* opzionale: centra in verticale */
}

.caption-card {
    float:left;
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
}
.caption-card img {
    float: left;
    margin: 0;
    padding: 0;
    border: none;
}
.caption-card span {
    float: left;
    margin: 0;
    width: 80%;
    height:100%;
    color: #ffffff;
    position: absolute;
    padding-left:10%;
    padding-right:10%;
    left: 0%;
    bottom: 50%;
    align-content: center;
    align-items: center;
    vertical-align: middle;
    transform: translate(0%, 50%);
    display: flex;
    flex-direction: column;   /* ⬅️ QUESTA È LA CHIAVE */
    justify-content: center;  /* opzionale: centra in verticale */
}

.caption-official {
    float:left;
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
}
.caption-official img {
    float: left;
    margin: 0;
    padding: 0;
    border: none;
}
.caption-official span {
    float: left;
    margin: 0;
    width: 80%;
    height:100%;
    color: #ffffff;
    position: absolute;
    padding-left:10%;
    padding-right:10%;
    left: 0%;
    bottom: 50%;
    align-content: center;
    align-items: center;
    vertical-align: middle;
    transform: translate(0%, 50%);
    display: flex;
    flex-direction: column;   /* ⬅️ QUESTA È LA CHIAVE */
    justify-content: center;  /* opzionale: centra in verticale */
}

#testo-sopra .caption span {
    position: absolute;
    top: 15%;                /* parte dall’alto a 3% */
    left: 50%;              /* centrato in orizzontale */
    transform: translateX(-50%);  /* correzione per centratura */

    width: 90%;
    margin: 0;
    color: #ffffff;
    padding: 0 5%;

    display: flex;
    flex-direction: column;
    align-items: center;        /* centra orizzontalmente i contenuti */
    justify-content: flex-start;/* i contenuti partono dall’alto */
}
#testo-sotto .caption span {
    float: left;
    margin: 0;
    width: 90%;
    height:100%;
    color: #ffffff;
    position: absolute;
    padding-left:5%;
    padding-right:5%;
    left: 0%;
    bottom: 30%;
    align-content: center;
    align-items: center;
    vertical-align: middle;
    transform: translate(0%, 50%);
    display: flex;
    flex-direction: column;   /* ⬅️ QUESTA È LA CHIAVE */
    justify-content: center;  /* opzionale: centra in verticale */
}


/* RESPONSIVE */

@media(max-width:1440px){
  
}

@media(max-width:1366px){
 
}

@media(max-width:1280px){

}

@media(max-width:1024px){
    #testo-sopra .caption span {top: 9%; }
}

@media(max-width:991px){

}

@media(max-width:800px){
    
}

@media(max-width:600px){
 .caption-hero span {
    padding-left:5%;
    padding-right:5%;
    left: 0%;
    bottom: 50%;
     width: 90%;
}   
}

@media(max-width:480px){

}

@media(max-width:350px){

}

@media(max-width:375px){

}