@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Jura:wght@400;500;600&family=Montserrat+Alternates:wght@400;500;600&family=Playfair+Display:wght@400;500;600&display=swap");

*{
  margin: 0px;
  padding:  0px 0px 0px 0px;
  box-sizing: border-box;
}
body {
    padding:  0px 0px 0px 0px;
    margin: 0px;
    background-color: rgba(0, 0, 0, 0.978);
}
* , a{
    text-decoration: none;
    color: white;
}

/* ==========================================================
   ШРИФТЫ (подключены через @import в самом верху файла)
   Montserrat Alternates — шапка и кнопка «Записаться» на главном экране
   Jura                  — «премиальная автомойка» и подзаголовок
   Playfair Display      — «БЕЗУПРЕЧНАЯ ЧИСТОТА ВАШЕГО АВТО» и «ЯРУС CLEAN AUTO»
   Inter                 — все остальные <p>
   ========================================================== */
p {
  font-family: "Inter", Arial, sans-serif;
}
.header,
.header a,
.header button,
.button_To_Offer {
  font-family: "Montserrat Alternates", "Inter", Arial, sans-serif;
}
.VIPWasg,
.Newdigital_techno {
  font-family: "Jura", "Inter", Arial, sans-serif;
}
.SuperStill,
.NotTiried,
.YarusAuto {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
}
.m-accent {
  white-space: nowrap;  /* «ВАШЕГО АВТО» всегда одной строкой */
}
.Fisrt_Block{
height: 900px;
position: relative;
background-color: #0a0908;
min-height: 90vh;
overflow: hidden;
}
.Fisrt_Block::before{
  content: "";
  position: absolute;
  inset: 0;
  background: url('../img/hero.webp') center/cover no-repeat;
  opacity: .12;
  pointer-events: none;
}
.Fisrt_Block > *{
  position: relative;
  text-align: center;
  z-index: 1;
}

.Block_preview{
margin-left: 10rem; ;
margin-top: 6rem;
display: flex;

}
.Full_car{
    width: 32rem;
    height: auto;
    max-width: 100%;
    margin-left: 3rem;
}
.Img_Preview{
    height: 12rem;
    
}
.Second_preview{

    margin-left: 5rem;
}
.SuperStill{
    color: #D4AF37;
}
.VIPWasg{
  font-size: 32px;
}
.Newdigital_techno{
  font-size: 20px;
}
.NotTiried{
  margin-right: 80px;
}
.mainDitgital{
  width: 28rem;
}
.PositionButtton_Offer{
  margin-top: 68px;
}
.Parent_Text_services{
    display: flex;
    margin-top: 50px;
}
.Vip_tools{
 max-width: 40px;
 margin-right: 70px;
 margin-left: 10px;}
 .Fast_service{
max-width: 40px;
 margin-right: 70px;
 margin-left: 10px;
 }
 .block_buben{
 max-width: 120px;
 margin-right: 70px;
 margin-left: 10px;
 }
.general_size{
    height: 20px;
}
.blcok_cart{
    display: flex;
}
.Block_star{
    display: flexr;
}

.block_buben{ 

    display: flex;
}
.button_To_Offer{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 326px;
  height: 72px;
  background-color: #730000;
  font-size: 32px;
  border: 5px solid #FF2525;
  cursor: pointer;
  border-radius: 37px;
}

/* ==========================================================
   Главный экран, ТОЛЬКО десктоп: текст слева, как на макете.
   Лежит в media-запросе, чтобы не ломать мобильную версию
   (она ниже и скрывает .Parent_Text_services).
   ========================================================== */
@media (min-width: 821px) {
  .Block_preview {
    text-align: left;         /* перебивает центрирование из .Fisrt_Block > * */
    align-items: flex-start;  /* текст и картинка выровнены по верхнему краю */
  }

  /* "ВАШЕГО АВТО" на отдельной строке и целиком, без переноса слов */
  .m-accent {
    display: block;
  }
  .SuperStill,
  .NotTiried {
    white-space: nowrap;
  }

  /* три преимущества в ряд: иконка слева от текста */
  .Parent_Text_services {
    align-items: flex-start;
    gap: 2rem;
    margin-top: 2rem;
  }
  .blcok_cart,
  .block_buben {
    display: flex;
    align-items: center;
    gap: .5rem;
    max-width: none;
    margin: 0;
  }
  .Vip_tools,
  .Fast_service,
  .Is_Love_car {
    max-width: 90px;
    margin: 0;
  }
  .Parent_Text_services .general_size {
    width: 1.2rem;
    height: auto;
  }
  .Parent_Text_services p {
    font-size: 12px;
    text-align: left;
  }
}

.Beutifyl_car{
    width: auto;  /* было 600px: Playfair шире и не помещался, слова ломались */
    font-size: clamp(44px, 5.2vw, 80px);  /* 80px на широких экранах, меньше на узких */
}

.Link_to{
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 30px;
    height: 100px;
    padding: 40px 23rem 0px 8rem;
}

.ToOffer{
    margin-left: 120px;
    margin-top: 10px;
    width: 200px;
    height: 40px;
    border-width: 1px;
    border-radius:24px ;
    cursor: pointer;
    border-color: #D4AF37;
    background-color: rgba(0, 0, 0, 0.5 );
}
.StarFOrservice{
    font-size: 20px;
}


.OneLineClass{
    display: flex;
    width: auto;


}
.Main_Preview_service{
    margin-left: 84px;
    margin-top: 60px;
}
.TextToService{
    margin-top: 7px;
    margin-left: 10px;

}
.TextToServiceTwo{
    margin-top: 7px;
    margin-left: 7px;
}
.IconOfferWatch{
    font-size: 20px;
    padding: 5px;
}
.TextToServiceLast{
    margin-top: 8px;
    margin-left: 10px;

}
.Grid_conteiner{
    display: grid;
    grid-template-columns: 1fr 1fr ;

}
.Save_gandler{
    margin-left: 10rem;
    margin-top: 20px;
}
.Your_Car{
    color: #FF0000;
    font-size: 48px;
}
.InSave_yourCar{
      font-size: 48px;
}
.IconOffer{
    font-size: 20px;
    padding: 5px;
}


.Rounded_Offer{
    margin-top: 30px;
    border: 2px solid #9C763B  ;
    height: 50px;
    width:360px ;
    border-radius: 50px;
    padding: 2px;
}
.Offer{
    display: flex ;
    justify-content: space-between;
    height: 100%;
}
.IconOfferTwo{
    font-size: 20px;
margin-left: 2px;
    
}
.Out_Wash,
.Interier{
    border: 0;
    border-radius: 50px;
    height: 100%;
    width: 180px;
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: 17px;
    cursor: pointer;
}
.Out_Wash.is-active,
.Interier.is-active{
    background: linear-gradient(to right ,#FFF0B5 , #D9A64C ,  #8E6028 );
    color: #000;
}
.Price{
    margin-top: 30px;
    margin-left: 84px;
    margin-bottom: 20px;
}
.OneToOnewSize{
    font-size: 32px;
}
.OneToOnew{
    font-size: 20px;
    margin-top: 10px;
    color: #C8C3BA;
}

.price-tabs,
.m-controls .seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 420px;
  margin-top: 18px;
  padding: 3px;
  border: 1px solid #9C763B;
  border-radius: 999px;
  background: #0A0908;
}
.m-controls .seg-btn {
  height: 42px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  color: #f2f2f2;
}
.m-controls .seg-btn.is-active {
  background: linear-gradient(90deg, #FFF0B5, #D9A64C, #8E6028);
  color: #000;
}
.car-pick { display: none; }

.price[data-section="exterior"] [data-section="interior"],
.price[data-section="interior"] [data-section="exterior"] {
  display: none !important;
}
.price[data-section="interior"] .card[data-section="interior"] {
  grid-column: 1 / -1;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #000;
  font-family: "Inter", Arial, sans-serif;
  color: #f2f2f2;

}

/* сетка 2x2 */
.price {
    padding: 0px 25px 0px;
  width: 1658px;
  display: grid;
  grid-template-columns: 809px 809px;
  column-gap: 40px;
  row-gap: 33px;
}

/* карточка */
.card {
  background: #151515;
  border: 2px solid #a98544;
  border-radius: 22px;
  padding: 0 25px 18px;
  height: auto;
}

.card-2 .row.extra-row,
.card-3 .row.extra-row,
.card-4 .row.extra-row {
  grid-template-columns: 1fr minmax(160px, 240px);
}

.p-extra {
  white-space: normal;
  text-align: right;
  padding: 16px 8px 16px 0;
}

.card-head {
  padding: 47px 9px 22px;
  border-bottom: 1px solid #a98544;
}

.card-head h2 {
  font-size: 15px;
  font-weight: 400;
  line-height: 20px;
  color: #f2f2f2;
}

.card-head p {
  margin-top: 8px;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: 0.5px;
  color: #b5b5b5;
}

.row {
  display: grid;
  grid-template-columns: 1fr 132px 132px 133px;
  align-items: center;
  text-align: center;
  border-bottom: 1px solid #5f5030;
  min-height: 72px;
  padding: 12px 0;
}

.row.extra-row {
  grid-template-columns: 1fr minmax(200px, 320px);
}

.card-2 .row,
.card-4 .row {
  grid-template-columns: 1fr 140px 138px 102px;
}

.row:last-child {
  border-bottom: none;
}

.row-head {
  height: 53px;
  font-size: 15px;
  color: #cfcfcf;
  border-bottom: 1px solid #a98544;
}

.row-head span:first-child {
  text-align: left;
  padding-left: 8px;
}

.name {
  text-align: left;
  padding-left: 9px;
  padding-right: 20px;
}

.name b {
  display: block;
  font-size: 15px;
  font-weight: 400;
  line-height: 20px;
  color: #f2f2f2;
}

.name small {
  display: block;
  margin-top: 9px;
  font-size: 14.5px;
  line-height: 24px;
  color: #b5b5b5;
}

.price-val {
  font-size: 15px;
  color: #e6bf5a;
  white-space: nowrap;
}

.dash {
  color: #b5b5b5;
}

.row-top {
  align-items: start;
}
.big .name b {
  font-size: 17px;
}

.big .name small {
  margin-top: 6px;
  font-size: 14px;
  line-height: 20px;
}

.big .row-head {
  font-size: 15px;
}

.big .price-val {
  font-size: 15px;
}

.big .row-head span:first-child,
.big .name {
  padding-left: 8px;
}

.card-3 .row:nth-child(2) {
  border-bottom: 1px solid #5f5030;
}
.YarusAuto{
    font-size: 38px;
}
.PremiumCarWash{
    font-size: 18px;
}
.textAboutSection{
    max-width: 570px;
    font-size: 20px;
    margin-top: 20px;
}

.ButtonAbout{
    width: 200px;
    height: 45px;
    border: 1px #D1A04D solid;
    background-color: rgba(0, 0, 0, 0.5 );
    border-radius: 30px;


}
.ButPositionAboout{
    margin-top: 10px;

}
.About{
    margin-top: 40px;
    margin-bottom: 40px;
    font-size: 20px;
    color: #D9AD5E;
}
.GridAbout{
    display: flex;
    justify-content: space-between;
}
.ImgCar{
    margin-left: 80px;

}
.GroupIconRed{
text-align: end;
margin-top: 20px;
}

.TextTO_Service1{
display: flex;
padding: 10px;
}
.TextTO_Service2{
display: flex;
padding: 10px;
}
.TextTO_Service3{
    display: flex;
    padding: 10px;
    margin-left: 5px;
}
.DopText{
    margin-top: 5px;
    margin-left: 10px;
}
.SectionTextService{
    margin-top: 5px;
}
.DopTextFullTime{
    max-width: 200px;
    margin-left: 10px;
    text-align: start;
}

.SectionAboutMain{
    padding: 0px 30px 0px 30px;
    height: 350px;
    width: auto;
    background-color: #0A0908;
}
.PhotoLib{
    margin-top: 20px;
    color: #D9AD5E;
}
.hrToAbout{
    margin-top: 30px;
    border: none;
    height: 1px ;
    background: linear-gradient(to right ,#D4AF37 , #FF0000 );
 mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
}
.hrToAboutToGalereya{
   margin-top: 30px;
    border: none;
    height: 1px ;
    background: linear-gradient(to left ,#D4AF37 , #FF0000 );
    mask-image: linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
    -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);  
}
.hrToAboutAfterImage{
    margin-top: 30px;
    margin-bottom: 30px;
    border: none;
    height: 0.5px ;
    background:#D4AF37 ;
}
.hrToAboutAfterReview{
    margin-top: 30px;
    margin-bottom: 30px;
    border: none;
    height: 0.5px ;
    background:#D4AF37 ;
}
.FirstBlockWork{
    display: flex;
    justify-content: space-between;
    padding: 15px;
}
.BlackButton{
    width: 215px;
    height: 45px;
    border: 1px #9D773E solid;
    border-radius: 40px;
    background-color: rgba(0, 0, 0, 0.5 ) ;
}
.hrFOoterFirst{
    margin-top: 20px;
border: none;
height: 1px;
background:#D4AF37  ;
}
.hrFOoter{
border: none;
height: 1px;
background:#D4AF37  ;
}
.WorkTeam{
    padding: 15px;
}
.ResultTalk{
    padding: 15px;
    color: #C2BDB3;
}
.LineImgWork{
    padding: 15px;
    display: flex;
    justify-content: space-between;
}
.Review{
    color: #D9AD5E;
}
.BlockReviewFirst{
padding: 15px;
}


.ReviewName{
    width: 390px;
    height: 190px;
    background-color: #151515;
}
.BlcokWithReview{
    padding: 0px 70px 0px 70px;
    display: flex;
justify-content: space-between;
}

.FirstBlockwithReview{
    margin-top: 30px;
    width: 390px;
    height: 190px;
    border: 1px #9D773E solid;
    border-radius: 20px;
}
.CirclyReview{
    width: 50px;
    height: 50px;
    border-radius: 100px;
    background-color: #8D6B3C   ;
    margin-left: 20px;
    margin-top: 25px;
}
.NameClient{
    display: flex;
}
.dateReview{
    font-size: 12px;
    padding: 5px;
    margin-left: 3px;
}
.StarReview{
    margin-left: 5px;
}
.InfoClient{
    margin-top: 35px;
    margin-left: 10px;
    font-size: 20px;
}
.ContainerTextToReview{
    width: 350px;
}
.TextToReview{
margin-left:20px;
margin-top: 10px;
}

.ContacInfo{
    margin-top: 30px;
}
.WritingtoWash{
    margin-top: 30px;
}
.GiveOffer {
    margin-top: 20px;
    width: 200px;
    height: 50px;
    border: 1px solid #8D6B3C;
    border-radius: 40px;
    color: black;
    font-size: 17px;
    padding: 20px 20px 20px 20px ;
    background: linear-gradient(to right, #FFF0B5, #D9A64C, #8E6028);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;      /* Центрирование при многострочном тексте */
    box-sizing: border-box;  /* Корректный расчет ширины/высоты с учетом рамки */
    text-decoration: none;
}
.ClientONas{
    margin-top: 40px;
    padding-bottom: 20px;
}
.CalltoWash{
    padding:10px;
    display: flex;
}
.InfotoCallWash{
    margin-left: 10px;
}
.LocationWahs{
    width: 30px;
    height: 30px;
}
.FooterINfo{
    padding: 0px 70px 0px 70px;
margin-left: 100px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.CallToWash{
    color: #C2BDB3;
    margin-left: 5px;
}
.LocalWahs{
    padding: 10px;
    display: flex;
}
.CityWahs{
    margin-left: 10px;
}
.TimeMenegmentWork{
    margin-left: 10px;
}
.YourComfort{
    color: #C2BDB3;
    margin-left: 10px;
}
.Time{
    color: #C2BDB3;
}
.TimeWorkWash{
    padding: 10px;
    display: flex;
    margin-left: 5px;
}
.MapToWash{
    position: absolute;
}
.BuildPath{
    position: relative;
    color: white;
    width: 200px;
    height: 45px;
    background-color: rgb(0 0  0 / 0.5);
    border: none;
    border-radius: 40px;
}
.PostionButtonPath{
display: flex;
justify-content: end;
padding: 10px;
margin-top: 130px;
}
.containerMap{
    max-width: 420px;

}
.FootedopButton{
padding: 0px 100px 0px 100px;
    display: flex;

    justify-content: space-between;
}
.LinktoSection{
    display: flex;
    justify-content: space-between;
    gap: 20px;
    font-size: 23px;
    margin-top: 80px;   
}
.ToOfferFooter{
    margin-top: 75px;
    width: 200px;
    height: 40px;
    border-width: 1px;
    border-radius:24px ;
    cursor: pointer;
    border-color: #D4AF37;
    background-color: rgba(0, 0, 0, 0.5 );
}
.PictireSizeInGridOne{
     width: 40px;
    margin-top: 6px;
    height: 25px;
}
.PictireSizeInGrid{
    width: 40px;
    margin-top: 7px;
    height: 20px;
}
.lastBlockFooter{
    padding: 30px 20px 30px 20px;
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr; 
}
.Line1{
    width: 1px;
margin-left: 120px;
    height: 40px;
    background: #D4AF37;
}
.BlockFooter1{
    display: flex;

}
.BlockFooter2{
    display: flex;
}
.BlockFooter3{
    display: flex;
    
}

.NeatMaster{
padding:10px;
font-size: 14px;
}
.high_quality{
padding:10px;
font-size: 14px;
}
.Cureful{
padding:10px;
font-size: 14px;

}
.AutoToNice{
    text-align: start;
    margin-left: 20px;
}
.LastBdivFooter{
margin-left: 80px;
}
.RigthSec{
    color: #C2BDB3;
    font-size: 20px;
    margin-top: 80px;
    
}
/* ==========================================================
   mobile.css — мобильная версия «Ярус Clean Auto»
   Подключать ПОСЛЕ основного css.
   Эталон: iPhone 15 (393 × 852). Дальше всё тянется
   (clamp / % / fr), так что работает на 320–820px.
   Десктоп не затрагивается: всё внутри @media.
   ========================================================== */

/* мобильные элементы по умолчанию скрыты (на десктопе их нет) */
.m-controls,
.m-heading,
.m-cta,
.m-inline { display: none; }

@media (max-width: 820px) {

  :root {
    --pad: clamp(14px, 4.5vw, 28px);
    --gold: #D9AD5E;
    --gold-line: #9C763B;
    --card: #0e0d0c;
    --gold-grad: linear-gradient(90deg, #FFF0B5, #D9A64C, #8E6028);
  }

  html { -webkit-text-size-adjust: 100%; }
  body { overflow-x: hidden; }

  /* включаем мобильные элементы */
  .m-controls, .m-heading { display: block; }
  .m-cta { display: block; }
  .m-inline { display: inline; }

  /* ---------- ШАПКА ---------- */
  .header {
    background: rgba(0, 0, 0, .55);
    border-bottom: 1px solid rgba(212, 175, 55, .35);
  }
  .Link_to {
    height: auto;
    padding: 10px var(--pad);
    gap: 10px;
    font-size: clamp(13px, 3.8vw, 16px);
    justify-content: space-between;
  }
  .nav-home, .nav-contacts { display: none; }
  .Link_to > a:first-child { order: 0; }
  .nav-about    { order: 1; }
  .nav-services { order: 2; }
  .nav-price    { order: 3; }
  .Button_solo_header { order: 4; }
  .Img_Preview { height: 44px; width: auto; display: block; }
  .ToOffer {
    margin: 0;
    width: auto;
    height: 34px;
    padding: 0 14px;
    font-size: clamp(12px, 3.5vw, 14px);
    white-space: nowrap;
  }

  .Fisrt_Block {
    height: auto;
    min-height: min(150vw, 640px);
    background-position: 60% center;
  }
  .Block_preview {
    display: block;
    margin: 0;
    padding: clamp(32px, 9vw, 56px) var(--pad) 56px;
  }
  .Second_preview,
  .Parent_Text_services { display: none; }

  .VIPWasg {
    font-size: clamp(18px, 5.6vw, 26px);
    color: var(--gold);
    text-transform: uppercase;
    line-height: 1.15;
  }
  .Beutifyl_car {
    width: auto;
    margin-top: 6px;
    font-size: clamp(34px, 10.5vw, 48px);
    line-height: 1.12;
  }
  .m-accent { color: #FF2525; font-size: .8em; }
  .mainDitgital { width: auto; margin-top: 22px; }
  .Newdigital_techno { font-size: clamp(14px, 4vw, 17px); line-height: 1.5; color: #e6e1d8; }

  .PositionButtton_Offer { margin-top: clamp(36px, 12vw, 64px); display: flex; justify-content: center; }
  .button_To_Offer {
    width: min(100%, 326px);
    height: 62px;
    font-size: clamp(16px, 4.6vw, 19px);
    font-weight: 700;
    color: #000;
    background: var(--gold-grad);
    border: 0;
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(217, 166, 76, .25);
  }

  .Grid_conteiner { display: none; }


  .Price {
    margin: 32px 0 0;
    padding: 0 var(--pad);
    text-align: center;
    scroll-margin-top: 12px;
  }
  .OneToOnewSize { font-size: clamp(32px, 10vw, 44px); letter-spacing: .04em; }
  .OneToOnew { font-size: clamp(12px, 3.4vw, 15px); margin-top: 6px; }

  .m-controls { margin-top: 20px; text-align: left; }

  .seg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 3px;
    border: 1px solid var(--gold-line);
    border-radius: 999px;
    background: #0A0908;
  }
  .seg-btn {
    height: 42px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    font: inherit;
    font-size: clamp(13px, 3.8vw, 15px);
    font-weight: 600;
    cursor: pointer;
    color: #f2f2f2;
    transition: background .2s, color .2s;
  }
  .seg-btn.is-active { background: var(--gold-grad); color: #000; }

  .car-pick {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 8px;
    border: 1px solid var(--gold-line);
    border-radius: 18px;
    background: #0A0908;
  }
  .car-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 4px 10px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    font: inherit;
    font-size: clamp(13px, 3.8vw, 15px);
    color: #bdb7ad;
    cursor: pointer;
    transition: border-color .2s, background .2s, color .2s;
  }
  .car-btn svg { width: 30px; height: 30px; color: var(--gold); }
  .car-btn.is-active {
    border-color: #C9A15A;
    background: rgba(201, 161, 90, .12);
    color: #fff;
  }
  .seg-btn:focus-visible,
  .car-btn:focus-visible,
  .m-cta:focus-visible { outline: 2px solid #FFF0B5; outline-offset: 2px; }

  /* ---------- ПРАЙС: карточки ---------- */
  .price {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px var(--pad) 0;
  }
  .price .card {
    height: auto;
    padding: 0 16px;
    border-radius: 18px;
    background: var(--card);
    border-color: var(--gold-line);
  }
  .price .card-head { padding: 20px 2px 14px; }
  .price .card-head h2 { font-size: clamp(13px, 3.8vw, 15px); color: var(--gold); letter-spacing: .04em; }
  .price .card-head p { margin-top: 6px; font-size: 13px; line-height: 1.3; letter-spacing: .02em; }

  .price .card .table .row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 6px 12px;
    height: auto;
    padding: 14px 0;
    text-align: left;
  }
  /* строка с описанием: цена уходит под текст, вправо */
  .price .card .table .row:has(small) { grid-template-columns: 1fr; }
  .price .card .table .row:has(small) .price-val,
  .price .card .table .row:has(small) .dash { text-align: right; }

  .price .card .table .row:last-child { border-bottom: 0; }

  .price .card .table .row-head {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    font-size: 12px;
    letter-spacing: .08em;
    color: #9a9a9a;
    text-transform: uppercase;
  }
  .price .card .table .row-head span:first-child { padding: 0; }
  .price .card .table .row-head span:nth-child(n+2) { display: none; }
  .price .card .table .row-head::after { content: "Цена"; }

  .price .card .table .name { padding: 0; }
  .price .card .table .name b { font-size: clamp(14px, 4vw, 16px); line-height: 1.3; }
  .price .card .table .name small { margin-top: 4px; font-size: 13px; line-height: 1.4; }
  .price .card .table .price-val {
    padding: 0;
    font-size: clamp(14px, 4vw, 16px);
    text-align: right;
    white-space: nowrap;
  }

  /* ГЛАВНОЕ: показываем цену только выбранного типа авто */
  .price[data-car="sedan"]  .p-jeep,
  .price[data-car="sedan"]  .p-pickup,
  .price[data-car="jeep"]   .p-sedan,
  .price[data-car="jeep"]   .p-pickup,
  .price[data-car="pickup"] .p-sedan,
  .price[data-car="pickup"] .p-jeep { display: none; }

  .m-heading { padding: 10px 2px 0; }
  .m-heading .kicker { color: var(--gold); font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }
  .m-heading .title { margin-top: 10px; font-size: clamp(15px, 4.2vw, 18px); }

  .m-cta {
    width: 100%;
    height: 56px;
    border: 0;
    border-radius: 999px;
    background: var(--gold-grad);
    color: #000;
    font: inherit;
    font-size: clamp(15px, 4.3vw, 17px);
    font-weight: 700;
    cursor: pointer;
  }

  #price-exterior,
  #price-interior { scroll-margin-top: 16px; }

  /* ---------- О НАС ---------- */
  .hrToAbout, .hrToAboutToGalereya { margin-top: 28px; }
  .SectionAboutMain { height: auto; padding: 0 var(--pad) 28px; }
  .About { margin: 28px 0 14px; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }
  .GridAbout { display: flex; flex-direction: column; gap: 20px; }
  .YarusAuto { font-size: clamp(24px, 7vw, 32px); }
  .PremiumCarWash { font-size: 14px; color: #C8C3BA; margin-top: 6px; }
  .textAboutSection { max-width: none; margin-top: 14px; font-size: clamp(14px, 4vw, 16px); line-height: 1.55; color: #d8d3ca; }
  .ButPositionAboout { display: none; }
  .ImgCar { margin: 0; }
  .ImgCar img { display: block; width: 100%; height: auto; }

  .GroupIconRed {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 0;
    text-align: center;
  }
  .TextTO_Service1, .TextTO_Service2, .TextTO_Service3 {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 14px 6px;
    border: 1px solid var(--gold-line);
    border-radius: 14px;
  }
  .TextTO_Service1 img, .TextTO_Service2 img, .TextTO_Service3 img { height: 26px; width: auto; }
  .DopText, .DopTextFullTime, .SectionTextService {
    margin: 0;
    max-width: none;
    text-align: center;
    font-size: clamp(11px, 3.2vw, 13px);
    line-height: 1.3;
  }

  /* ---------- ГАЛЕРЕЯ ---------- */
  .gallery { display: flex; flex-direction: column; padding: 0 var(--pad); }
  .gallery .FirstBlockWork { display: contents; }
  .PhotoLib { order: 1; margin: 24px 0 14px; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }
  .gallery-title { order: 2; }
  .LineImgWork { order: 3; }
  .gallery-more { order: 4; }
  .WorkTeam { padding: 0; }
  .ResultTalk { padding: 0; margin-top: 6px; font-size: 14px; }
  .LineImgWork {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 16px 0;
  }
  .LineImgWork img { width: 100%; height: auto; display: block; }
  .BlackButton { width: 100%; height: 48px; font: inherit; font-size: 15px; cursor: pointer; }

  /* ---------- ОТЗЫВЫ ---------- */
  .hrToAboutAfterImage, .hrToAboutAfterReview { margin: 24px 0; }
  .BlockReviewFirst { padding: 0 var(--pad); }
  .Review { font-size: 14px; letter-spacing: .08em; }
  .ClientONas { margin-top: 16px; padding-bottom: 8px; }
  .BlcokWithReview { flex-direction: column; gap: 14px; padding: 0 var(--pad); }
  .FirstBlockwithReview { width: 100%; height: auto; margin-top: 0; padding-bottom: 16px; }
  .ContainerTextToReview { width: auto; padding-right: 16px; }
  .TextToReview { font-size: 14px; line-height: 1.5; }

  /* ---------- планшеты: центрируем колонку ---------- */
  .Block_preview, .Price, .price, .SectionAboutMain, .gallery,
  .BlockReviewFirst, .BlcokWithReview, .book-page {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ==========================================================
   ПОДВАЛ (footer.html)
   ========================================================== */

/* на десктопе мобильные элементы подвала скрыты */
.m-final,
.m-tabbar,
.m-img,
.m-block,
.m-link { display: none; }

@media (max-width: 820px) {

  /* место под фиксированную нижнюю панель */
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }

  /* ---------- Контакты ---------- */
  .FooterINfo {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 0;
    padding: 0 var(--pad);
    scroll-margin-top: 12px;
  }
  .ContacInfo { margin-top: 24px; }
  .ContacInfo > p { color: var(--gold); font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }
  .ContacInfo > div:nth-of-type(1) p { margin-top: 16px; font-size: clamp(15px, 4.2vw, 18px); }
  .ContacInfo > div:nth-of-type(2) p { margin-top: 8px; font-size: 14px; line-height: 1.45; color: #C8C3BA; }
  .GiveOffer {
    display: block;
    width: 100%;
    height: 56px;
    margin-top: 20px;
    font: inherit;
    font-size: clamp(15px, 4.3vw, 17px);
    font-weight: 700;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
  }

  .WritingtoWash {
    margin: 0;
    padding: 4px 16px;
    border: 1px solid var(--gold-line);
    border-radius: 18px;
    background: var(--card);
  }
  .WritingtoWash .CalltoWash,
  .WritingtoWash .LocalWahs,
  .WritingtoWash .TimeWorkWash {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 14px 0;
    border-bottom: 1px solid #5f5030;
  }
  .WritingtoWash .TimeWorkWash { border-bottom: 0; }
  .WritingtoWash img { display: block; width: 28px; height: 28px; }
  .WritingtoWash p { font-size: clamp(14px, 4vw, 16px); }
  .WritingtoWash .InfotoCallWash,
  .WritingtoWash .CityWahs,
  .WritingtoWash .TimeMenegmentWork { margin: 0; }
  .WritingtoWash .CallToWash,
  .WritingtoWash .YourComfort,
  .WritingtoWash .Time { margin: 2px 0 0; font-size: 13px; color: #C8C3BA; }

  /* карта на мобилке не нужна — остаётся кнопка маршрута */
  .containerMap { max-width: none; }
  .MapToWash { display: none; }
  .PostionButtonPath { display: block; margin: 0; padding: 0; }
  .BuildPath {
    display: block;
    width: 100%;
    height: 48px;
    font: inherit;
    font-size: 15px;
    border: 1px solid var(--gold-line);
    cursor: pointer;
  }

  /* ---------- финальный призыв ---------- */
  .m-final { display: block; padding: 36px var(--pad) 8px; text-align: center; }
  .m-final-logo { display: block; width: min(60%, 220px); height: auto; margin: 0 auto; }
  .m-final-kicker { margin-top: 14px; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
  .m-final-title { margin-top: 14px; font-size: clamp(26px, 7.6vw, 34px); line-height: 1.15; font-weight: 600; }
  .m-final-title span { color: #FF2525; }
  .m-final-text { max-width: 30ch; margin: 14px auto 22px; font-size: 14px; line-height: 1.5; color: #C8C3BA; }
  .m-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 22px; }
  .m-features div { display: flex; flex-direction: column; align-items: center; gap: 6px; }
  .m-features img { height: 24px; width: auto; }
  .m-features p { font-size: clamp(11px, 3.2vw, 13px); line-height: 1.25; }

  .hrFOoterFirst, .hrFOoter { margin: 24px 0 0; }

  /* ---------- навигация + копирайт ---------- */
  .FootedopButton { display: flex; flex-direction: column; gap: 14px; padding: 0 var(--pad); }
  .FootedopButton > a { display: none; }
  .LinktoSection { display: flex; flex-direction: column; gap: 0; margin-top: 24px; font-size: clamp(14px, 4vw, 16px); }
  .LinktoSection::before {
    content: "Навигация";
    padding-bottom: 12px;
    color: var(--gold);
    font-size: 14px;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .LinktoSection a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 13px 0;
    border-bottom: 1px solid #2a2418;
  }
  .LinktoSection a::after { content: "›"; color: #FF2525; font-size: 20px; line-height: 1; }
  .LinktoSection .m-link { display: flex; }
  .f-home { order: 1; } .f-services { order: 2; } .f-price { order: 3; }
  .f-about { order: 4; } .f-gallery { order: 5; } .f-contacts { order: 6; }

  .Button_solo_header .RigthSec { margin: 0; font-size: 13px; line-height: 1.5; color: #C8C3BA; }
  .m-block { display: block; margin-top: 4px; }

  /* ---------- нижний баннер ---------- */
  .lastBlockFooter { display: block; padding: 20px var(--pad) 28px; }
  .BlockFooter1, .BlockFooter2, .BlockFooter3 { display: none; }
  .LastBdivFooter { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .m-img { display: block; height: 48px; width: auto; }
  .AutoToNice { margin: 0; text-align: right; font-style: italic; font-size: clamp(14px, 4.2vw, 17px); line-height: 1.35; }

  /* ---------- нижняя панель ---------- */
  .m-tabbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 50;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding: 8px 4px calc(8px + env(safe-area-inset-bottom, 0px));
    background: rgba(10, 9, 8, .96);
    border-top: 1px solid var(--gold-line);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
  .m-tabbar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: clamp(10px, 2.9vw, 12px);
    color: #e8e2d8;
  }
  .m-tabbar svg {
    width: 22px; height: 22px;
    fill: none;
    stroke: #FF2525;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
}

.book-page {
  width: min(760px, 100%);
  margin: 36px auto 10px;
  padding: 0 25px 12px;
  scroll-margin-top: 16px;
  box-sizing: border-box;
}
.book-page .book-kicker {
  color: #D9AD5E;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.book-page .OneToOnewSize {
  margin-top: 4px;
  font-size: 28px;
}
.book-page .OneToOnew {
  font-size: 14px;
}
.book-page .flash-wrap {
  margin: 12px 0 0;
  padding: 0;
  max-width: none;
}
.book-layout {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
  padding: 16px 16px 12px;
  border: 2px solid #a98544;
  border-radius: 16px;
  background: #151515;
}
.book-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.book-bottom {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: stretch;
  margin-top: 10px;
}
.book-bottom .book-total {
  margin: 0;
  padding: 10px 14px;
}
.book-bottom .book-submit {
  margin: 0;
  min-width: 200px;
  height: 44px;
  font-size: 14px;
}

.flash-wrap {
  max-width: 720px;
  margin: 16px auto 0;
  padding: 0 20px;
}
.flash-ok {
  padding: 14px 18px;
  border: 1px solid #9C763B;
  border-radius: 14px;
  background: #151515;
  color: #e6bf5a;
}

.book-kicker {
  color: #D9AD5E;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.book-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.book-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: #C8C3BA;
}
.book-input,
.book-select,
.book-form input[type="text"],
.book-form input[type="tel"],
.book-form textarea,
.book-form select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #9C763B;
  border-radius: 10px;
  background: #0e0d0c;
  color: #f2f2f2;
  font: inherit;
  font-size: 14px;
}
.book-form textarea { min-height: 64px; resize: vertical; }
.book-cars,
.book-checks {
  display: grid;
  gap: 6px;
}
.book-cars {
  grid-template-columns: repeat(3, 1fr);
}
.book-checks {
  grid-template-columns: 1fr 1fr;
}
.book-car,
.book-checks label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid #5f5030;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
}
.book-check-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.book-check-text small {
  color: #e6bf5a;
  font-size: 12px;
}
.book-group {
  margin-top: 8px;
  color: #D9AD5E;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.book-error {
  color: #FF2525;
  font-size: 13px;
}
.book-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-top: 6px;
  padding: 10px 14px;
  border: 1px solid #9C763B;
  border-radius: 14px;
  background: #151515;
}
.book-total span {
  color: #C8C3BA;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.book-total strong {
  color: #e6bf5a;
  font-size: 16px;
  font-weight: 700;
  text-align: right;
}
.book-submit {
  margin-top: 8px;
  height: 52px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #FFF0B5, #D9A64C, #8E6028);
  color: #000;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.slot-picker { display: flex; flex-direction: column; gap: 8px; }
.slot-days {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 2px 8px;
  scrollbar-width: thin;
}
.slot-day {
  flex: 0 0 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 6px 8px;
  border: 1px solid #5f5030;
  border-radius: 14px;
  background: #0e0d0c;
  color: #f2f2f2;
  cursor: pointer;
  font: inherit;
  transition: border-color .2s, background .2s, transform .15s;
}
.slot-wd {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #C8C3BA;
}
.slot-num {
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}
.slot-mon { font-size: 11px; color: #C8C3BA; }
.slot-hours-caption {
  margin: 0;
  font-size: 13px;
  color: #e6bf5a;
}
.slot-left {
  margin-top: 4px;
  font-size: 10px;
  color: #e6bf5a;
  white-space: nowrap;
}
.slot-day.is-today { border-color: #9C763B; }
.slot-day.is-active {
  border-color: #C9A15A;
  background: linear-gradient(180deg, rgba(217,166,76,.18), #151515);
  color: #fff;
}
.slot-day:disabled {
  opacity: .4;
  cursor: not-allowed;
}
.slot-hours {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.slot-hours[hidden] {
  display: none !important;
}
.slot-hour {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 6px;
  border: 1px solid #5f5030;
  border-radius: 12px;
  background: #0e0d0c;
  color: #f2f2f2;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  transition: border-color .2s, background .2s, transform .15s;
}
.slot-hour small {
  color: #e6bf5a;
  font-size: 11px;
}
.slot-hour.is-active {
  border-color: #C9A15A;
  background: rgba(201, 161, 90, .16);
  color: #000;
  background: linear-gradient(180deg, #FFF0B5, #D9A64C);
}
.slot-hour.is-active small { color: #5a3d12; }
.slot-hour.is-busy,
.slot-hour:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.SizeRange{
  width: 400px;
  height: 500px;
}
.PositionVideo{
  display: flex;
  justify-content: center;
}

.Video{
height: 700px;
border-radius: 30px;
}
.PositionRange{
  display: flex;
  margin: 20px;
}
.SizeRangeLeft{
  width: 400px;
  height: 500px;
  margin-left: 20px;
}
.SizeRangeRight{
   width: 400px;
  height: 500px;
  margin-left: 20px;
}
@media (hover: hover) and (pointer: fine) {
  .slot-day:not(:disabled):hover,
  .slot-hour:not(:disabled):hover {
    border-color: #C9A15A;
    transform: translateY(-2px);
  }
}

@media (max-width: 820px) {
  .slot-hours { grid-template-columns: repeat(3, 1fr); }
  .book-cars,
  .book-checks,
  .book-row,
  .book-bottom { grid-template-columns: 1fr; }
  .book-page {
    width: 100%;
    margin-top: 24px;
    padding: 0 var(--pad, 16px) 8px;
  }
  .book-layout { padding: 14px 12px 10px; }
  .book-bottom .book-submit { min-width: 0; width: 100%; height: 48px; }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}
@keyframes goldPulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(217, 166, 76, .18); }
  50% { box-shadow: 0 8px 32px rgba(217, 166, 76, .42); }
}
@keyframes popNum {
  0% { transform: scale(1); }
  45% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.VIPWasg,
.Beutifyl_car,
.mainDitgital,
.PositionButtton_Offer {
  animation: fadeUp .7s ease both;
}
.Beutifyl_car { animation-delay: .12s; }
.mainDitgital { animation-delay: .22s; }
.PositionButtton_Offer { animation-delay: .32s; }

.price .card {
  animation: fadeUp .45s ease both;
}
.price[data-section="exterior"] .card-1 { animation-delay: 0s; }
.price[data-section="exterior"] .card-2 { animation-delay: .08s; }
.price[data-section="exterior"] .card-3 { animation-delay: .16s; }
.price[data-section="interior"] .card-4 { animation-delay: 0s; }

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}
.button_To_Offer,
.ToOffer,
.GiveOffer,
.book-submit,
.m-cta,
.BlackButton,
.ButtonAbout {
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.button_To_Offer {
  animation: goldPulse 2.8s ease-in-out infinite;
}
.seg-btn,
.Out_Wash,
.Interier,
.car-btn,
.book-car,
.book-checks label,
.book-select,
.book-input {
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}
.row:not(.row-head) {
  transition: background .2s ease;
}
.card {
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.FirstBlockwithReview {
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.LineImgWork {
  overflow: hidden;
}
.LineImgWork img {
  transition: transform .45s ease;
}
.book-checks label:has(:checked),
.book-car:has(:checked) {
  border-color: #C9A15A;
  background: rgba(201, 161, 90, .12);
}

#book-total-value {
  display: inline-block;
  transform-origin: right center;
}
#book-total-value.is-pop {
  animation: popNum .28s ease;
}

.flash-ok {
  animation: fadeUp .4s ease both;
}

@media (hover: hover) and (pointer: fine) {
  .card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(217, 166, 76, .16);
    border-color: #d4af37;
  }
  .row:not(.row-head):hover {
    background: rgba(201, 161, 90, .08);
  }
  .button_To_Offer:hover,
  .book-submit:hover,
  .GiveOffer:hover,
  .m-cta:hover {
    transform: translateY(-2px) scale(1.02);
    filter: brightness(1.06);
  }
  .ToOffer:hover,
  .BlackButton:hover,
  .ButtonAbout:hover {
    transform: translateY(-1px);
    border-color: #D9AD5E;
  }
  .button_To_Offer:active,
  .book-submit:active,
  .GiveOffer:active,
  .m-cta:active,
  .ToOffer:active {
    transform: scale(.98);
  }
  .FirstBlockwithReview:hover {
    transform: translateY(-5px);
    border-color: #D9AD5E;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .35);
  }
  .LineImgWork img:hover {
    transform: scale(1.05);
  }
  .car-btn:hover,
  .book-checks label:hover,
  .book-car:hover {
    border-color: #C9A15A;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
}
/* Адаптация специально для экранов до 440px */
@media (max-width: 440px) {
    
    /* Контейнер и размер видео */
    .PositionVideo {
        display: flex;
        justify-content: center;
        padding: 0 16px;
        box-sizing: border-box;
        width: 100%;
        margin-bottom: 20px; /* Отступ снизу до картинок */
    }
    
    .Video {
      margin-top: 20px;
        width: 100%;
        max-width: 360px; 
        height: auto;
        border-radius: 12px;
    }


    .PositionRange {
        display: grid;
        grid-template-columns: repeat(2, 1fr); 
        gap: 8px;
        padding: 0 16px;
        box-sizing: border-box;
        width: 100%;
    }

    .PositionRange img,
    .PositionRange .SizeRange,
    .PositionRange .SizeRangeLeft,
    .PositionRange .SizeRangeRight {
        width: 100% !important;
        height: 140px !important; 
        object-fit: cover;        
        margin: 0 !important;
        position: static !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        border-radius: 8px;       
    }
}