*,
*::before,
*::after { box-sizing: border-box; padding: 0; margin: 0; }
*:focus { outline: 0; }
* { text-decoration: none;  -webkit-tap-highlight-color: transparent; }

:root { overscroll-behavior: none; overflow-x: hidden; }

html { font-size: 100%; scroll-behavior: smooth; }

body { margin: 0;  padding: 0;  font-family: "PT Serif", serif; font-size: clamp(16px, 1.1vw, 20px); color: #000; }

ul, ol { margin: 0; }

a, a:link, a:hover, a:focus, a:active { text-decoration: none; outline: 0; -webkit-tap-highlight-color: transparent; }

img { max-width: 100%; height: auto; }

.container { padding: 0 60px; }

.page-wrap { width: 100%; max-width: 1600px; background: #fff; position: relative;  margin: 0 auto; padding: 0 60px; }

section { margin: 60px 0; }

.hero { position: relative; height: 50svh; min-height: 500px; padding: 60px 0; background: linear-gradient(179deg, rgba(0, 0, 0, 0.60) 0.82%, rgba(78, 1, 1, 0.60) 99.14%); color: #fff; margin: 0; }
.hero .container { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.hero h1 { font-size: clamp(40px, 4vw, 60px); max-width: 1200px; line-height: 1; margin-bottom: 25px; }
.hero p { max-width: 800px; text-wrap: balance; }
.hero .cover-img { position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }

.group { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; aspect-ratio: 1; color: #fff; margin-bottom: 30px; }
.group h2, .group span { z-index: 1; }
.group h2 { font-size: clamp(30px, 3vw, 50px); line-height: 1; margin-bottom: 10px; }
.group h2 a { color: #fff; }
.group h2 a:before { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; }
.group span { display: block; font-size: clamp(20px, 1.5vw, 26px); }
.group img { position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.4); }

.item { display: flex; align-items: stretch; gap: 40px; background: #fff; color: #666; box-shadow: 0 4px 84px 0 rgba(0, 0, 0, 0.25); margin-bottom: 30px; }
.item .images { width: 40%; }
.item .images img { display: block; height: 100%; object-fit: cover; }
.swiper-gallery { height: 100%; }
.swiper-gallery .swiper-controls { position: absolute; bottom: 30px; width: 100%; display: flex; justify-content: space-between; }
.swiper-gallery .swiper-controls .swiper-button-next, .swiper-gallery .swiper-controls .swiper-button-prev { position: unset; height: 50px; width: 60px; margin: 0; color: #fff; background: rgba(0, 0, 0, 0.60); padding: 8px; } 
.swiper-gallery .swiper-controls .swiper-pagination { position: unset; height: 50px; background: rgba(0, 0, 0, 0.60); display: flex; align-items: center; width: auto; color: #fff; padding: 0 20px; }
.item .info { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; width: 60%; padding: 30px 30px 30px 0; }
.item .top { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 10px;} 
.item .description { display: flex; align-items: flex-start; gap: 15px; background: rgba(217, 217, 217, 0.25); padding: 15px; text-wrap: balance; margin-bottom: 15px; }
.item .description div p:not(:last-child) { margin-bottom: 10px; }
.item .description.green { background: #E0EBD7; color: #10764B; }
.item .description.yellow { background: #F7DE9B; color: #5C4300; }
.item h2 { font-size: clamp(30px, 3vw, 50px); color: #A30606; margin-bottom: 30px; }
.item .featured { display: flex; flex-wrap: wrap; column-gap: 20px; row-gap: 10px; }
.item .featured > div { width: calc(50% - 10px); }
.item .featured > div span { display: inline-block; color: #A30606; font-weight: 700; margin-right: 5px; }
.item .bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; border-top: 2px solid #e6e6e6; padding-top: 30px; margin-top: 20px; }
.item .price { display: flex; align-items: flex-end; gap: 10px; line-height: 2.6em; }
.item .price  span { font-size: clamp(24px, 2.4vw, 44px); color: #A30606; font-weight: 700; }
.item .button { background: #7E0707; font-weight: 700; color: #F8F8F8; padding: 16px 46px; line-height: 1; transition: all 0.3s; }
.item .button:hover { background: #590505; }

.row { display: flex; flex-wrap: wrap; margin: 0 -15px;  }
.row > * { padding: 0 15px; }

[class*="col-"] { width: 100%; }

.col-auto { flex: 0 0 auto; width: auto; }
.col-12 { flex: 0 0 auto; width: 100%; }
.col-11 { flex: 0 0 auto; width: 91.66666667%;}
.col-10 { flex: 0 0 auto; width: 83.33333333%;}
.col-9 { flex: 0 0 auto; width: 75%;}
.col-8 { flex: 0 0 auto; width: 66.66666667%;}
.col-7 { flex: 0 0 auto; width: 58.33333333%;}
.col-6 { flex: 0 0 auto; width: 50%; }
.col-5 { flex: 0 0 auto; width: 41.66666667%;}
.col-4 { flex: 0 0 auto; width: 33.33333333%;}
.col-3 { flex: 0 0 auto; width: 25%; }
.col-2 { flex: 0 0 auto; width: 16.66666667%;}
.col-1 { flex: 0 0 auto; width: 8.33333333%;}

@media (min-width: 768px) {
    .col-md-auto { flex: 0 0 auto; width: auto; }
    .col-md-1 { flex: 0 0 auto; width: 8.33333333%; }
    .col-md-2 { flex: 0 0 auto; width: 16.66666667%; }
    .col-md-3 { flex: 0 0 auto; width: 25%; }
    .col-md-4 { flex: 0 0 auto; width: 33.33333333%; }
    .col-md-5 { flex: 0 0 auto; width: 41.66666667%; }
    .col-md-6 { flex: 0 0 auto; width: 50%; }
    .col-md-7 { flex: 0 0 auto; width: 58.33333333%; }
    .col-md-8 { flex: 0 0 auto; width: 66.66666667%; }
    .col-md-9 { flex: 0 0 auto; width: 75%; }
    .col-md-10 { flex: 0 0 auto; width: 83.33333333%; }
    .col-md-11 { flex: 0 0 auto; width: 91.66666667%; }
    .col-md-12 { flex: 0 0 auto; width: 100%; }
}
@media (min-width: 992px) {
    .col-lg-auto { flex: 0 0 auto; width: auto; }
    .col-lg-1 { flex: 0 0 auto; width: 8.33333333%; }
    .col-lg-2 { flex: 0 0 auto; width: 16.66666667%; }
    .col-lg-3 { flex: 0 0 auto; width: 25%; }
    .col-lg-4 { flex: 0 0 auto; width: 33.33333333%; }
    .col-lg-5 { flex: 0 0 auto; width: 41.66666667%; }
    .col-lg-6 { flex: 0 0 auto; width: 50%; }
    .col-lg-7 { flex: 0 0 auto; width: 58.33333333%; }
    .col-lg-8 { flex: 0 0 auto; width: 66.66666667%; }
    .col-lg-9 { flex: 0 0 auto; width: 75%; }
    .col-lg-10 { flex: 0 0 auto; width: 83.33333333%; }
    .col-lg-11 { flex: 0 0 auto; width: 91.66666667%; }
    .col-lg-12 { flex: 0 0 auto; width: 100%; }
}

@media (min-width: 1200px) {
    .col-xl-auto { flex: 0 0 auto; width: auto; }
    .col-xl-1 { flex: 0 0 auto; width: 8.33333333%; }
    .col-xl-2 { flex: 0 0 auto; width: 16.66666667%; }
    .col-xl-3 { flex: 0 0 auto; width: 25%; }
    .col-xl-4 { flex: 0 0 auto; width: 33.33333333%; }
    .col-xl-5 { flex: 0 0 auto; width: 41.66666667%; }
    .col-xl-6 { flex: 0 0 auto; width: 50%; }
    .col-xl-7 { flex: 0 0 auto; width: 58.33333333%; }
    .col-xl-8 { flex: 0 0 auto; width: 66.66666667%; }
    .col-xl-9 { flex: 0 0 auto; width: 75%; }
    .col-xl-10 { flex: 0 0 auto; width: 83.33333333%; }
    .col-xl-11 { flex: 0 0 auto; width: 91.66666667%; }
    .col-xl-12 { flex: 0 0 auto; width: 100%; }
}

@media (min-width: 1400px) {
    .col-xxl-auto { flex: 0 0 auto; width: auto; }
    .col-xxl-1 { flex: 0 0 auto; width: 8.33333333%; }
    .col-xxl-2 { flex: 0 0 auto; width: 16.66666667%; }
    .col-xxl-3 { flex: 0 0 auto; width: 25%; }
    .col-xxl-4 { flex: 0 0 auto; width: 33.33333333%; }
    .col-xxl-5 { flex: 0 0 auto; width: 41.66666667%; }
    .col-xxl-6 { flex: 0 0 auto; width: 50%; }
    .col-xxl-7 { flex: 0 0 auto; width: 58.33333333%; }
    .col-xxl-8 { flex: 0 0 auto; width: 66.66666667%; }
    .col-xxl-9 { flex: 0 0 auto; width: 75%; }
    .col-xxl-10 { flex: 0 0 auto; width: 83.33333333%; }
    .col-xxl-11 { flex: 0 0 auto; width: 91.66666667%; }
    .col-xxl-12 { flex: 0 0 auto; width: 100%; }
}