.Packages {width:100%; max-width:1350px; margin:0 auto; padding:4rem 1rem;}
.Packages-header {background-image:url("../../img/packages-background.jpg?v=2"); background-position:50% 100%;}
.PackagesList {display:flex; flex-wrap:wrap; gap:2rem; justify-content:center; align-items:stretch;}
.PackagesList-item {display:flex; flex:1; justify-content:stretch; align-items:flex-start; flex-direction:column; flex-wrap:nowrap; max-width:410px; min-width:350px; font-size:80%; border:1px solid #DFDFDF; border-radius:1rem; background-color:white; box-shadow:0 0 12px rgba(0,0,0,0.2);}
.PackagesList-item > * {order:2;}
.PackagesList-item .PackagesList-preview {order:1; position:relative; width:100%; height:240px;}
.PackagesList-previewImage {display:block; width:100%; height:100%; background:#c5def3 none 50% 50% no-repeat; background-size:cover; border-top-left-radius:1rem; border-top-right-radius:1rem;}
.PackagesList-name {width:100%;; font-size:120%; font-weight:600; padding:1rem 1rem .5rem 1rem;}
.PackagesList-lengthStay {display:block; width:100%; font-size:90%; color:#555; padding:0 1rem .5rem 1rem;}
.PackagesList-price {display:block; width:100%; padding:0 1rem .5rem 1rem; font-size:180%; font-weight:800; color:#219E54;}
.PackagesList-tags {width:fit-content; display:flex; justify-content:flex-start; align-items:center; flex-wrap:wrap; gap:.6rem; margin:0 1rem .5rem 1rem;}
.PackagesList-tags > li {display:flex; justify-content:center; align-items:center; flex-direction:row; padding:.2em 1em; font-weight:normal; background-color:#E4F8EB; color:#0D5A28; border:1px solid #ABE9C0; border-radius:1.5em; font-size:85%;}
.PackagesList-tags > li:last-child {background-color:#FEF1DB; color:#946422; border-color:#FCE7C3;}
.PackagesList-description {flex:5; width:100%; color:#555; padding:0 1rem; line-height:130%; overflow:hidden; font-weight:300;}
.PackagesList-buttons {display:flex; justify-content:flex-start; align-items:center; gap:1rem; padding:1rem;}
.PackagesList-buttons .Btn {padding-top:.5em; padding-bottom:.5em; background-color:#ECF0F3; border-width:0;}
.PackagesList-buttons .Btn:hover {background-color:black; color:white;}
.PackagesList-buttons .Btn--primary {background-color:#219E54; color:white;}

.Packages--detail {padding:0;}
.PackagesList-previewPictures {display:flex; justify-content:flex-start; align-items:flex-start; gap:1rem; flex-wrap:wrap;}
.PackagesList-picturePrimary {display:block; flex:1; min-width:100%; height:400px; background:white none 50% 50% no-repeat; background-size:cover;}

.PackagesWindow {z-index:1000 !important;}
.PackagesWindow > .Container {max-width:820px !important;}
.PackagesWindow > .Container > div {max-width:100%;}
.Packages--detail .PackagesList-previewPictures {padding:0 1rem; max-width:100%;}
.Packages--detail .PackagesList-picture,
.Packages--detail .PackagesList-picturePrimary {border-radius:.7rem;}
.Packages--detail .PackagesList-price {padding-top:.5rem; padding-bottom:1rem;}
.Packages--detail .PackagesList-pictutreList {display:block; width:100%; height:calc(100px + 20px); min-width:100%; max-width:100%; overflow:auto;}
.Packages--detail .PackagesList-pictutreListContainer {height:100px; display:flex; justify-content:flex-start; align-items:stretch; flex-direction:row; flex-wrap:nowrap; gap:1rem; padding:0; margin:0;}
.Packages--detail .PackagesList-picture {height:100px; width:33.33%; min-width:180px; max-width:250px; background:white none 50% 50% no-repeat; background-size:cover;}
.Packages--detail .PackagesList-tags {margin-top:1rem;}
.PackagesList-otherTexts {display:flex; justify-content:flex-start; align-items:stretch; flex-direction:row; flex-wrap:wrap; gap:.5rem; padding:1rem;}
.PackagesList-otherTexts .PackagesList-description {min-width:calc(50% - .25rem); max-width:calc(50% - .25rem); font-size:82%; background-color:#F9FAFC; border:1px solid #ECECEC; border-radius:.5rem; padding:.3rem .5rem;}
.PackagesList-share {padding:.5rem 1rem 1rem 1rem; font-size:80%;}
.PackagesList-share .Btn {padding:.1rem; margin-left:.5rem; width:2em; height:2em; border-color:#abe9c0; background-color:#e4f8eb; color:#30b860;}
.PackagesList-share .Btn:hover {background-color:#30b860; border-color:#30b860; color:white;}
.PackagesList-share .fa-share-alt {color:#1a73e8;}

.ReservationWindow {z-index:1000; width:100%; height:100%; top:0; left:0;}
.ReservationWindow > .Container {width:90%; max-width:500px; height:fit-content; max-height:90%; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); border:10px solid #efefef; background-color:white; padding:1rem;}
.ReservationWindow > .hdmtitle {position:relative; z-index:3;}
.ReservationWindow > .hdmtitle > .hdmclose {display:flex; justify-content:center; align-items:center; top:1rem; right:2rem; font-size:200%; width:1.5em; height:1.5em; border:2px solid rgba(22,163,74,0.5); color:#16a34a; border-radius:50%; background-color: rgba(255,255,255,0.5); backdrop-filter: blur(8px); box-shadow: 0 0 12px rgba(0,0,0,0.3);}
.ReservationWindow > .hdmtitle > .hdmclose:hover {color:#f26127; border-color:#f26127; background-color:rgba(255,255,255,0.8); transition:color .3s linear, border-color .3s linear;}
.ReservationWindow > .hdmtitle > .hdmclose > .fa {display:block; text-align:center; position:relative; top:-.02em;}
.ReservationWindow h1 {font-size:140%; font-weight:400; padding-bottom:.3rem; text-align:center; min-width:100%; line-height:120%;}

.SendReservationWindow {z-index:1000;}
.SendReservationWindow > .Container {background-color:white; border-color:#219E54;}
.SendReservationWindow .Btn--primary {background-color:#219E54; border-color:#219E54; color:white;}
.SendReservationWindow .Btn--primary:hover {background-color:#27be64; border-color:#27be64;}

.Reservation-item {font-size:80%; display:flex; justify-content:flex-start; align-items:center; flex-direction:row; flex-wrap:wrap; padding:0.3rem 0; gap:.2rem 1rem;}
.Reservation-name {display:block; font-size:60%; color:#555; font-weight:300; padding-top:.3rem; text-align:center; line-height:110%;}
.Reservation-label {min-width:100%;}
.Reservation-input {min-width:100%; max-width:100%; padding:.5rem; border:3px solid #a6d8bb; background-color:#f1faf4; border-radius:.5rem; transition:border-color .3s linear, background-color .3s linear;}
.Reservation-input:focus {outline:none; border-color:#27be64; background-color:white;}
.Reservation-input--number {width:100%; min-width:6em; max-width:6em;}
.Reservation-input--date {min-width:6em; max-width:calc(50% - .5rem); width:100%;}
.Reservation-input--text {height:5em; min-height:3em; max-height:10em; font-size:90%; resize:vertical;}
.Reservation-button {background-color:#219E54; color:white; border-width:0; font-size:110%; font-weight:600; padding:.6em 1.2em;}
.Reservation-button:hover {background-color:black;}

@media (max-width:680px) {
	.PackagesList-otherTexts .PackagesList-description {min-width:100%; max-width:100%;}
}

@media (max-width:450px) {
	.PackagesList-item {min-width:100%;}
}