﻿.hero img{object-position:top}
.hero .hero-media::after{background: rgba(0, 0, 0, 0.4);}

@media (min-width: 1280px) {
    .hero__content h1 {font-size: 9.6rem;}
}

.about-section {background: var(--beige-color);padding-bottom:8.8rem}
.about-section h2{color: var(--text-color-primary);text-transform: uppercase;font-size: 1.5rem;font-family: var(--ff-default);margin: 0;line-height: 1;letter-spacing: .2rem;font-weight: 500;margin-bottom: 2.4rem;}
.about-section h3{margin-top: 0;text-transform: none;color: var(--text-color-primary);font-weight: 300;font-size: 4.8rem;line-height: 1.1;margin-bottom:3.2rem}
.about-section .section-grid__column-copy p:first-of-type{margin-top:0}
.about-section .section-grid__column-copy p:last-of-type{margin-bottom:0}
.about-section .section-grid {display: grid;grid-template-columns: repeat(12, minmax(0, 1fr));grid-column-gap: 2.4rem;padding-top: 8.8rem;padding-bottom: 8.8rem;}
.about-section .section-grid__column:first-of-type{grid-column: span 12 / span 12;}
.about-section .section-grid__column:last-of-type{grid-column: span 12 / span 12;}

@media(min-width:768px){       
    .about-section .section-grid__column{grid-column: span 6 / span 6;}
}

@media(min-width:1280px){
    .about-section {padding-bottom:17.6rem}
    .about-section .section-grid{padding-top:17.6rem;}    
    .about-section .section-grid__column:first-of-type{grid-column: span 4 / span 4;grid-column-start: 2;}
    .about-section .section-grid__column:last-of-type{grid-column: span 5 / span 5;grid-column-start: 7;}
}

@media(min-width:1440px){
    .about-section h3{font-size: 6.4rem;}
}


@media(min-width:1920px) {
    .about-section h3{font-size:7.2rem}
    .about-section .section-grid__column:first-of-type{grid-column-start: 3;}
    .about-section .section-grid__column:last-of-type{grid-column: span 4 / span 4;}
}


.full-width-grid-images{display: flex;gap: 3.2rem;flex-direction:column;padding:0 1.6rem}
.full-width-grid__image{position: relative;flex: 1;aspect-ratio: 597 / 828;overflow: hidden;}
.full-width-grid__image picture{display:block;width:100%;height:100%;}
.full-width-grid__image img{position: absolute;top: -10%;left: 0;width: 100%;height: 120%;object-fit: cover;}

@media(min-width:768px){       
    .full-width-grid-images{gap:2.4rem;flex-direction:row;padding:0}
}

@media(min-width:1280px){
    .full-width-grid-images{gap:4.4rem}
}

@media(min-width:1920px){
    .full-width-grid-images{gap:8.8rem}
}


#dove-siamo-section{padding:0 0 8.8rem;background:var(--beige-color)}
#dove-siamo-section h2{color: var(--text-color-primary);text-transform: uppercase;font-size: 1.5rem;font-family: var(--ff-default);margin: 0;line-height: 1;letter-spacing: .2rem;font-weight: 500;}
#dove-siamo-section h3{font-size: 2.4rem;line-height: 1.3;text-transform: uppercase;color: var(--text-color-primary);text-align: center;font-weight: 300;margin:3.2rem 0}
#dove-siamo-section p{margin:auto; margin-bottom:6.4rem}

.media{width:100%;height:auto;aspect-ratio:1;object-fit:cover}

@media(min-width:650px){
    #dove-siamo-section p{width:calc((100% - 11 * 2.4rem) / 12 * 10 + 9 * 2.4rem)}
}

@media(min-width:992px){
    #dove-siamo-section p{width:calc((100% - 11 * 2.4rem) / 12 * 8 + 7 * 2.4rem)}
    .media{aspect-ratio:auto;}
}
   
@media(min-width:1280px){
    #dove-siamo-section p{width:calc((100% - 11 * 2.4rem) / 12 * 6 + 5 * 2.4rem);margin:3.2rem auto 0}
    #dove-siamo-section{padding:0 0 17.6rem}
    #dove-siamo-section h3{font-size:3.2rem}

    .media-wrapper{height:200vh}
    .media-container {height: 100vh;position: relative;overflow: hidden;}
    .media-mask {width: 100%;height: 100%;overflow: hidden;clip-path: inset(6.4rem 12%);will-change: clip-path;}
    .media {width: 100%;height: 100%;object-fit: cover;transform-origin: center;will-change: transform;object-position:bottom}
}


#arrival-section {background: var(--beige-color);padding-bottom: 8.8rem;}
#arrival-section .section-grid{display: grid;grid-template-columns: repeat(12, minmax(0, 1fr));grid-column-gap: 2.4rem;}
#arrival-section .section-grid__column{grid-column: span 12 / span 12;}    
#arrival-section .section-grid__column-map{grid-column: span 12 / span 12;}       
#arrival-section h2{color: var(--text-color-primary);text-transform: uppercase;font-size: 1.5rem;font-family: var(--ff-default);margin: 0;line-height: 1;letter-spacing: .2rem;font-weight: 500;margin-bottom: 3.2rem;}
#arrival-section .indirizzo{font-weight:700;margin-bottom:3.2rem;display:flex;align-items:center;gap:.8rem;line-height:1.2}
.arrival-box{border-top: 1px solid #dad9d4;margin-top: 3.2rem;color: var(--text-color-primary);}
.arrival-box__title{display:flex;gap:.8rem;align-items:center;font-size:2.1rem}

#arrival-section .section-grid__column-map{margin-top:3.2rem}
#arrival-section #map{aspect-ratio:1920/1280}
.custom-pin {width: 10rem;height: 10rem;background: white;border-radius: 50%;display: flex;align-items: center;justify-content: center;   }
.custom-pin img {width: 9rem;height: 9rem;object-fit: contain;}
.leaflet-pane{z-index:1}

@media(min-width:768px) {  
    #arrival-section .section-grid__column{grid-column: span 4 / span 4;grid-column-start: 2;}    
    #arrival-section .section-grid__column-map{grid-column: span 6 / span 6;grid-column-start: 7;margin-top:0}
    #arrival-section #map{height:100%;width:100%;aspect-ratio:auto}
}

@media(min-width:1280px){   
    #arrival-section{padding-bottom:17.6rem}  
}



#rooms-section{padding:8.8rem 0}
#rooms-section .section-grid{display: grid;grid-template-columns: repeat(12, minmax(0, 1fr));grid-column-gap: 2.4rem;}
#rooms-section .section-grid__column{grid-column: span 12 / span 12;}  
#rooms-section .section-grid__column img{width:100%;height:auto}
#rooms-section h2{color: var(--text-color-primary);text-transform: uppercase;font-size: 1.5rem;font-family: var(--ff-default);margin: 0;line-height: 1;letter-spacing: .2rem;font-weight: 500;margin-top: 3.2rem;}
#rooms-section h3{margin-top: 0;text-transform: none;color: var(--text-color-primary);font-weight: 300;font-size: 4.8rem;line-height: 1.1;margin-bottom:3.2rem;margin-top:3.2rem}
.room-services{list-style: none;padding: 0;margin: 3.2rem 0 0;}

.room-services li{display: flex;gap: .8rem;align-items: center;padding: 1.6rem 0;border-bottom: 1px solid #dad9d4;line-height:1}
.room-services li:first-of-type{border-top: 1px solid #dad9d4;}
.room-services li > div {width:25px;height:25px}
.room-services li > div svg{width:100%;height:auto}


#rooms-section .button{margin-top:2.4rem}

@media(min-width:768px) {
    #rooms-section h2{margin-top:0}
    #rooms-section .section-grid__column img{height:100%;object-fit:cover;object-position:left}
    #rooms-section .section-grid__column{grid-column: span 6 / span 6;}   
    #rooms-section .section-grid__column-copy{padding:2.4rem 0}

}

@media(min-width:1280px){   
    #rooms-section .section-grid__column-copy{grid-column: span 5 / span 5;grid-column-start: 8;}

}


@media(min-width:1920px) {
    #rooms-section .section-grid{align-items:center}
    #rooms-section .section-grid__column-copy{grid-column: span 4 / span 4;grid-column-start: 8;}
}
