.flickr {
    width: 100%;
    align-items: start;
}

/* Il blocco testo/immagine */
.flickr-box {

    width: 100% !important; 
    
    /* 1. Definiamo un'altezza fissa (o massima) e uno sfondo nero */
    height: 700px; /* Forziamo l'altezza del box a 700px */
    background-color: #000000; /* Le bande nere */
    
    /* 2. Centriamo l'immagine all'interno del box */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Evita che l'immagine esca dal box */
}

/* Applichiamo il comportamento a qualsiasi elemento Flickr infili dentro (img, iframe o a) */
.flickr-box img,
.flickr-box iframe,
.flickr-box xml,
.flickr-box a {
    width: 100% !important;
    height: 100% !important;
    
    /* 3. IL TRUCCO CRUCIALE: object-fit contain */
    /* Mantiene le proporzioni originali dell'immagine inserendola tutta nel box. 
       Se è verticale, avanzerà spazio a destra e a sinistra, mostrando lo sfondo nero del box */
    object-fit: contain !important; 
    
    display: block;
    margin: 0 auto;
}

/* Responsive: Applica le proporzioni solo da schermi computer in su */
@media (max-width: 768px) {
    .flickr {
        display: block;
    }
    .flickr-box {
        height: 450px; /* Abbassiamo l'altezza sui telefoni per non occupare tutto lo schermo */
    }
}