.service{
    width: 300px;
    padding: 1rem;

    margin: 0 auto;
}
.service--yellow{
    background-color: #fef5d0;
}
.service--orange{
    background-color: #ffcfb2;
}
.service--blue{
    background-color: #afe2ff;
}
.service--green{
    background-color: #b0d4a1;
}


.service__title{
    text-align: center;
}


.service__img{
    width: 200px;
    height: 200px;

    background-size: cover;
    /*border: 8px solid #FFDE59;*/
    border-radius: 50%;
    
    margin: 2rem auto;
}
.service__img--desayuno{
    background-image: url('../../../assets/img/desayuno_1.jpeg');
    background-position: 30% 10%;
}
.service__img--estancia{
    background-image: url('../../../assets/img/estancia_2.jpeg');
    background-position: 30% 10%;
}
.service__img--almuerzo{
    background-image: url('../../../assets/img/almuerzo_1.jpeg');
    background-position: 50% 10%;
}
.service__img--transporte{
    background-image: url('../../../assets/img/transporte_1.jpg');
    background-position: 10% 10%;
}


.service__description{
    text-align: center;
}

.service__button{
    margin: 2rem 0;
    padding: .5rem;
    background-color: white;
    color: #1A237E;

}
.service__button--yellow:hover{
    background-color: #FFDE59;
    color: #1A237E;
}
.service__button--orange:hover{
    background-color: #FF914D;
}
.service__button--blue:hover{
    background-color: #38B6FF;
}
.service__button--green:hover{
    background-color: #7ED957;
}


@media screen and (min-width: 600px){
    .service{
        width: 300px;
        flex-basis: 40%;
       
    }

}

@media screen and (min-width: 1100px){
    .service{
        width: 300px;
        flex-basis: 20%;
       
    }

}