@import 'colors.css';

.sect-servicios-photos {
    width: 100%;
    margin: 20px auto;
}

@media (min-width: 1080px) {

    .service-photos-container {
        display: flex;
        justify-content: center;        
        flex-direction: row;
        gap:10px;
    }

    .servicios-photos-top {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        max-width: 20%;
    }
    .servicios-photos-end {
        display: flex;
        justify-content: center;
        align-items: flex-end;
        max-width: 20%;
        margin-top:5%;
    } 
    #serv-photos img{
        max-width: 95%;
    }  
}

@media (min-width: 600px) and (max-width:1079px) {

    .service-photos-container {
        display: flex;
        justify-content: center;        
        flex-direction: row;
        gap:10px;
    }

    .servicios-photos-top {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        max-width: 20%;
    }
    .servicios-photos-end {
        display: flex;
        justify-content: center;
        align-items: flex-end;
        max-width: 20%;
        margin-top:5%;
    } 
    #serv-photos img{
        max-width: 95%;
    } 
}

@media (max-width: 599px) {

    .service-photos-container {
        display: flex;
        justify-content: center;        
        flex-direction: row;
        gap:10px;
    }

    .servicios-photos-top {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        max-width: 20%;
    }
    .servicios-photos-end {
        display: flex;
        justify-content: center;
        align-items: flex-end;
        max-width: 20%;
        margin-top:5%;
    } 
    #serv-photos img{
        max-width: 95%;
    } 
}

/* Ajustes para cuando el dispositivo esté en modo horizontal */
@media (min-width: 600px) and (max-width:1079px) and (orientation: landscape) {

    .service-photos-container {
        display: flex;
        justify-content: center;        
        flex-direction: row;
        gap:10px;
    }

    .servicios-photos-top {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        max-width: 20%;
    }
    .servicios-photos-end {
        display: flex;
        justify-content: center;
        align-items: flex-end;
        max-width: 20%;
        margin-top:5%;
    } 
    #serv-photos img{
        max-width: 95%;
    } 
}