﻿
.card-alloggio{border-radius:3.2rem;overflow:hidden;display:block;position:relative;background:var(--bg-soft);background:#fff}
.card-alloggio img{display:block;width:100%;height:auto;aspect-ratio:8/5.5;object-fit:cover}
.card-alloggio picture{display:block;position:relative}
/*.card-alloggio picture:after {content: "";position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .5) 100%);pointer-events: none;}
*/.card-alloggio__info{padding:2.4rem 1.6rem}
.card-alloggio__title{font-size:3.2rem;line-height:1.1;margin:0}
.card-alloggio__title small{text-transform: uppercase;font-size: 1.6rem;font-weight: 700;}
.sistemazioni__list-item:nth-child(2) .card-alloggio__title{width:75%}
.card-alloggio__fake-button {border: 2px solid var(--primary-color);width:4rem;height:4rem;display: flex;color:var(--primary-color);place-content: center;align-items: center;border-radius: 50%;    margin: auto;margin-right: 0;}

.card-alloggio .features{color:var(--text-color);gap:1.6rem;margin-top:1.6rem;margin-bottom:1.6rem}
.card-alloggio .feature{display: flex; flex-direction: row;font-size: 1.4rem;gap:.8rem;font-weight:normal}
.card-alloggio .feature__icon {font-size:1.2rem;width:auto;height:auto}
.card-alloggio .feature__label{text-shadow:none}
.card-alloggio .feature__label-persone span:last-of-type{display:inline}

.card-alloggio{width:calc(95% - 1.2rem);}

.card-alloggio__link{margin-top:2.4rem}

@media(min-width:390px){
    .card-alloggio .feature__icon{font-size:1.6rem}
}

@media(min-width:500px){
    .card-alloggio__name{font-size:2rem}
    .card-alloggio .feature{font-size:1.6rem}
}



@media(min-width:650px) {
    .card-alloggio{width:calc(75% - 1.2rem)}
    .card-alloggio__title,
    .sistemazioni__list-item:nth-child(2) .card-alloggio__title{width:100%;}
    .card-alloggio img{aspect-ratio:8/5;object-fit:cover}
} 

@media(min-width:768px){
    .card-alloggio{width:calc(50% - 1.2rem)}
    .card-alloggio__name{font-size:1.6rem}
}


@media(min-width:1280px){
    .card-alloggio{width:calc(40% - 1.2rem)}
}

@media(min-width:1440px) {
    .card-alloggio{width: calc((100% - (2.4rem * 2)) / 3)}
    .card-alloggio__title{font-size:3.2rem}
}

@media(min-width:1920px){
    .card-alloggio img{aspect-ratio:8/6}
    .card-alloggio__title{font-size:4.8rem}
}