/* BUY CAR DV — clean final HERO */

.hero-final{
    position:relative;
    height:405px;
    min-height:405px;
    overflow:hidden;
    color:#fff;

    background:
      linear-gradient(
        90deg,
        rgba(3,18,32,.91) 0%,
        rgba(3,18,32,.73) 25%,
        rgba(3,18,32,.26) 48%,
        rgba(3,18,32,.02) 72%
      ),
      url("/v40-ui/assets/home/v2/01_hero_main.jpg")
      center center / cover no-repeat;
}

.hero-final__inner{
    position:relative;
    width:min(1480px,calc(100% - 80px));
    height:100%;
    margin:0 auto;
}

.hero-final__content{
    position:relative;
    z-index:2;
    width:570px;
    padding-top:42px;
}

.hero-final__eyebrow{
    margin-bottom:12px;
    font-size:12px;
    line-height:1;
    font-weight:900;
    letter-spacing:.14em;
    color:#fff;
}

.hero-final h1{
    width:570px;
    margin:0 0 13px;
    padding:0;
    color:#fff;
    font-size:36px;
    line-height:1.02;
    letter-spacing:-1.1px;
    font-weight:950;
}

.hero-final h1 span{
    color:#ef233c;
}

.hero-final__content p{
    width:500px;
    margin:0 0 18px;
    color:rgba(255,255,255,.94);
    font-size:14px;
    line-height:1.4;
}

.hero-final__buttons{
    display:flex;
    align-items:center;
    gap:11px;
}

.hero-final__primary,
.hero-final__secondary{
    height:43px;
    box-sizing:border-box;
    padding:0 20px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:7px;
    text-decoration:none;
    font-size:13px;
    line-height:1;
    font-weight:850;
}

.hero-final__primary{
    color:#fff;
    background:#ef233c;
    border:1px solid #ef233c;
}

.hero-final__secondary{
    color:#fff;
    background:rgba(3,18,32,.42);
    border:1px solid rgba(255,255,255,.85);
}

.hero-final__trust{
    position:absolute;
    z-index:3;
    left:0;
    right:0;
    bottom:0;

    height:72px;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    align-items:center;

    border-top:1px solid rgba(255,255,255,.18);
    background:linear-gradient(
        90deg,
        rgba(2,16,29,.91),
        rgba(2,16,29,.73),
        rgba(2,16,29,.58)
    );
}

.hero-final__trust-item{
    height:42px;
    padding:0 18px;
    box-sizing:border-box;

    display:flex;
    align-items:center;
    gap:11px;

    border-left:1px solid rgba(255,255,255,.20);
}

.hero-final__trust-item:first-child{
    border-left:0;
}

.hero-final__icon{
    flex:0 0 31px;
    width:31px;
    height:31px;

    display:grid;
    place-items:center;

    border:1px solid rgba(255,255,255,.55);
    border-radius:8px;

    color:#fff;
    font-size:15px;
    font-weight:900;
}

.hero-final__trust strong{
    display:block;
    margin:0;
    color:#fff;
    font-size:12px;
    line-height:1.15;
    font-weight:850;
    white-space:nowrap;
}

.hero-final__trust small{
    display:block;
    margin-top:3px;
    color:rgba(255,255,255,.73);
    font-size:10px;
    line-height:1.1;
    white-space:nowrap;
}

.hero-final .hero-car{
    display:none!important;
}

/* Tablet */
@media(max-width:1000px){
    .hero-final{
        height:465px;
        min-height:465px;
        background-position:58% center;
    }

    .hero-final__inner{
        width:calc(100% - 40px);
    }

    .hero-final__content{
        width:500px;
    }

    .hero-final h1{
        width:500px;
        font-size:34px;
    }

    .hero-final__trust{
        grid-template-columns:repeat(3,1fr);
        height:auto;
        min-height:72px;
    }

    .hero-final__trust-item:nth-child(4),
    .hero-final__trust-item:nth-child(5){
        display:none;
    }
}

/* Mobile */
@media(max-width:700px){
    .hero-final{
        height:520px;
        min-height:520px;
        background-position:62% center;
    }

    .hero-final__inner{
        width:calc(100% - 28px);
    }

    .hero-final__content{
        width:100%;
        padding-top:38px;
    }

    .hero-final h1{
        width:100%;
        font-size:33px;
    }

    .hero-final__content p{
        width:100%;
    }

    .hero-final__buttons{
        flex-direction:column;
        align-items:flex-start;
    }

    .hero-final__trust{
        display:none;
    }
}

/* ===== HOMEPAGE LAYOUT FIX 01 ===== */

/* Filter must never overlap HERO */
.hero-final{
    margin-bottom:0!important;
}

#catalog{
    position:relative!important;
    z-index:2!important;
    margin-top:0!important;
    padding-top:28px!important;
    transform:none!important;
    background:#fff!important;
}

#catalog .search-card,
.search-card{
    position:relative!important;
    top:auto!important;
    bottom:auto!important;
    left:auto!important;
    right:auto!important;
    transform:none!important;

    width:min(1480px,calc(100% - 48px))!important;
    max-width:none!important;

    margin:0 auto 34px!important;
}

/* Five compact vehicle cards in one row */
#vehicleGrid{
    width:min(1480px,calc(100% - 48px))!important;
    margin-left:auto!important;
    margin-right:auto!important;

    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:14px!important;
}

#vehicleGrid .vehicle-card{
    min-width:0!important;
    width:auto!important;
    border-radius:12px!important;
}

#vehicleGrid .vehicle-card img,
#vehicleGrid .vehicle-photo img{
    width:100%!important;
    height:165px!important;
    object-fit:cover!important;
}

#vehicleGrid .vehicle-body,
#vehicleGrid .vehicle-content{
    padding:13px!important;
}

#vehicleGrid h3{
    font-size:16px!important;
    line-height:1.2!important;
}

/* Desktop: only first five offers */
@media(min-width:1101px){
    #vehicleGrid > .vehicle-card:nth-child(n+6){
        display:none!important;
    }
}

/* Tablet */
@media(max-width:1100px){
    #vehicleGrid{
        grid-template-columns:repeat(3,minmax(0,1fr))!important;
    }
}

/* Mobile */
@media(max-width:700px){
    #catalog{
        padding-top:18px!important;
    }

    #catalog .search-card,
    .search-card,
    #vehicleGrid{
        width:calc(100% - 28px)!important;
    }

    #vehicleGrid{
        grid-template-columns:1fr!important;
    }

    #vehicleGrid .vehicle-card img,
    #vehicleGrid .vehicle-photo img{
        height:220px!important;
    }
}

/* =========================================================
   APPROVED TOP — LOCKED LAYOUT
   Hero + filter + exactly 5 popular cars
   ========================================================= */

/* HERO: keep approved composition and expose more of ship/right side */
.hero-final{
    height:405px!important;
    min-height:405px!important;
    margin:0!important;

    background-image:
      linear-gradient(
        90deg,
        rgba(3,18,32,.90) 0%,
        rgba(3,18,32,.72) 24%,
        rgba(3,18,32,.22) 47%,
        rgba(3,18,32,.01) 72%
      ),
      url("/v40-ui/assets/home/v2/01_hero_main.jpg")!important;

    background-repeat:no-repeat!important;
    background-size:cover!important;

    /* shift picture left so the ship/container side stays visible */
    background-position:43% center!important;
}

.hero-final__inner{
    width:min(1480px,calc(100% - 80px))!important;
    height:100%!important;
    margin:0 auto!important;
}

/* Keep text compact like approved mockup */
.hero-final__content{
    width:570px!important;
    padding-top:40px!important;
}

.hero-final h1{
    width:570px!important;
    max-width:570px!important;
    font-size:36px!important;
    line-height:1.02!important;
    margin-bottom:12px!important;
}

.hero-final__content p{
    width:500px!important;
    max-width:500px!important;
    font-size:14px!important;
    line-height:1.4!important;
    margin-bottom:17px!important;
}

/* Trust row stays entirely inside HERO */
.hero-final__trust{
    bottom:0!important;
    height:72px!important;
}

/* =========================================================
   FILTER — ABSOLUTELY NO HERO OVERLAP
   ========================================================= */

#catalog{
    position:relative!important;
    z-index:1!important;

    margin:0!important;
    padding:30px 0 0!important;

    transform:none!important;
    top:auto!important;

    background:#f7f9fc!important;
}

#catalog > .wrap{
    margin-top:0!important;
    transform:none!important;
}

#catalog .search-card,
.search-card{
    position:relative!important;

    top:auto!important;
    bottom:auto!important;
    left:auto!important;
    right:auto!important;

    transform:none!important;

    width:min(1480px,calc(100% - 48px))!important;
    max-width:1480px!important;

    margin:0 auto 30px!important;
    padding:22px!important;

    box-sizing:border-box!important;
    border-radius:16px!important;

    background:#fff!important;
    box-shadow:0 8px 28px rgba(12,39,65,.08)!important;
}

/* =========================================================
   POPULAR CARS — EXACTLY FIVE ON HOMEPAGE
   ========================================================= */

#vehicleGrid{
    width:min(1480px,calc(100% - 48px))!important;
    max-width:1480px!important;

    margin:0 auto!important;

    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    align-items:stretch!important;
    gap:14px!important;
}

/* Hide EVERYTHING after card 5 on desktop */
@media(min-width:1101px){
    #vehicleGrid > *:nth-child(n+6){
        display:none!important;
    }
}

#vehicleGrid .vehicle-card{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;

    margin:0!important;

    display:flex!important;
    flex-direction:column!important;

    border-radius:12px!important;
    overflow:hidden!important;

    background:#fff!important;
}

#vehicleGrid .vehicle-card img,
#vehicleGrid .vehicle-photo,
#vehicleGrid .vehicle-photo img{
    width:100%!important;
}

#vehicleGrid .vehicle-photo{
    height:165px!important;
    overflow:hidden!important;
}

#vehicleGrid .vehicle-photo img,
#vehicleGrid .vehicle-card > img{
    height:165px!important;
    object-fit:cover!important;
}

#vehicleGrid .vehicle-body,
#vehicleGrid .vehicle-content{
    padding:12px 14px!important;
}

#vehicleGrid .vehicle-card h3{
    margin:0 0 5px!important;
    font-size:16px!important;
    line-height:1.18!important;
}

/* Do not leave giant blank vertical area under cards */
#vehicleGrid .vehicle-card{
    min-height:0!important;
    height:auto!important;
}

#vehicleGrid + *{
    clear:both!important;
}

/* Tablet */
@media(max-width:1100px){
    #vehicleGrid{
        grid-template-columns:repeat(3,minmax(0,1fr))!important;
    }
}

/* Mobile */
@media(max-width:700px){
    .hero-final{
        background-position:55% center!important;
    }

    #catalog{
        padding-top:20px!important;
    }

    #catalog .search-card,
    .search-card,
    #vehicleGrid{
        width:calc(100% - 28px)!important;
    }

    #vehicleGrid{
        grid-template-columns:1fr!important;
    }
}

/* =========================================================
   HERO IMAGE FIT — SHOW THE WHOLE BANNER
   ========================================================= */

.hero-final{
    height:405px!important;
    min-height:405px!important;
    overflow:hidden!important;
    position:relative!important;

    /*
      Important:
      no COVER here. The source banner must be visible almost in full.
    */
    background-image:
      linear-gradient(
        90deg,
        rgba(3,18,32,.91) 0%,
        rgba(3,18,32,.70) 25%,
        rgba(3,18,32,.20) 48%,
        rgba(3,18,32,.00) 74%
      ),
      url("/v40-ui/assets/home/v2/01_hero_main.jpg")!important;

    background-repeat:no-repeat,no-repeat!important;

    /*
      Gradient fills the block.
      Photo is reduced instead of being zoomed/cropped by cover.
    */
    background-size:100% 100%, auto 100%!important;
    background-position:center center, center center!important;

    /* dark base prevents white gaps if screen is very wide */
    background-color:#071b2b!important;
}

/*
  On very wide desktop monitors make the image a little smaller
  vertically so even more of its width/ship remains visible.
*/
@media(min-width:1500px){
    .hero-final{
        background-size:100% 100%, auto 94%!important;
        background-position:center center, center center!important;
    }
}

/* Keep approved content above the photograph */
.hero-final__inner{
    position:relative!important;
    z-index:2!important;
}

/* Keep the lower advantages inside the banner */
.hero-final__trust{
    bottom:0!important;
    z-index:5!important;
}

/* Tablet */
@media(max-width:1100px){
    .hero-final{
        background-size:100% 100%, auto 100%!important;
        background-position:center center, 55% center!important;
    }
}

/* Mobile */
@media(max-width:700px){
    .hero-final{
        background-size:100% 100%, auto 100%!important;
        background-position:center center, 58% center!important;
    }
}

/* =========================================================
   IMAGE SCALE FIX — HERO + ROUTE
   Показываем больше исходного изображения, без cover
   ========================================================= */

/* ---------- MAIN HERO ---------- */
.hero-final{
    background-color:#071b2b!important;

    background-image:
      linear-gradient(
        90deg,
        rgba(3,18,32,.90) 0%,
        rgba(3,18,32,.68) 24%,
        rgba(3,18,32,.18) 48%,
        rgba(3,18,32,.00) 74%
      ),
      url("/v40-ui/assets/home/v2/01_hero_main.jpg")!important;

    background-repeat:no-repeat,no-repeat!important;

    /* Было 94–100%. Теперь уменьшаем фотографию заметнее */
    background-size:100% 100%, auto 82%!important;

    background-position:center center, center center!important;
}

/* ---------- ROUTE / BIG MAP ---------- */
.route-reference{
    position:relative!important;
    overflow:hidden!important;
    background-color:#06223a!important;

    background-image:
      linear-gradient(
        90deg,
        rgba(3,22,39,.94) 0%,
        rgba(3,22,39,.76) 31%,
        rgba(3,22,39,.25) 62%,
        rgba(3,22,39,.08) 100%
      ),
      url("/v40-ui/assets/home/banners/routes.jpg")!important;

    background-repeat:no-repeat,no-repeat!important;

    /*
      Главное изменение:
      карта больше НЕ cover.
      Уменьшаем её внутри блока.
    */
    background-size:100% 100%, auto 76%!important;
    background-position:center center, 70% center!important;
}

/* Сама внутренняя карта тоже компактнее */
.route-map{
    transform:scale(.82)!important;
    transform-origin:center center!important;
}

/* Desktop wide screens */
@media(min-width:1500px){
    .hero-final{
        background-size:100% 100%, auto 78%!important;
    }

    .route-reference{
        background-size:100% 100%, auto 72%!important;
    }

    .route-map{
        transform:scale(.78)!important;
    }
}

/* Tablet */
@media(max-width:1100px){
    .hero-final{
        background-size:100% 100%, auto 88%!important;
    }

    .route-reference{
        background-size:100% 100%, auto 82%!important;
    }

    .route-map{
        transform:scale(.88)!important;
    }
}

/* Mobile */
@media(max-width:700px){
    .hero-final{
        background-size:100% 100%, auto 92%!important;
    }

    .route-reference{
        background-size:100% 100%, auto 88%!important;
    }

    .route-map{
        transform:scale(.92)!important;
    }
}

/* ===== IMAGE FIT V2 — MORE OF THE ORIGINAL IMAGE ===== */

/* Главный баннер: ещё сильнее уменьшаем фотографию внутри Hero */
.hero-final{
    background-size:100% 100%, auto 68%!important;
    background-position:center center, center center!important;
}

/* Большая карта/логистика: тоже показываем больше исходной картинки */
.route-reference{
    background-size:100% 100%, auto 62%!important;
    background-position:center center, 68% center!important;
}

/* Внутреннюю графику маршрута уменьшаем вместе с фоном */
.route-map{
    transform:scale(.70)!important;
    transform-origin:center center!important;
}

@media(min-width:1500px){
    .hero-final{
        background-size:100% 100%, auto 64%!important;
    }

    .route-reference{
        background-size:100% 100%, auto 58%!important;
    }

    .route-map{
        transform:scale(.66)!important;
    }
}

/* =========================================================
   HERO FINAL GEOMETRY
   Source image: 1983 x 348 = 5.698:1
   Approved composition
   ========================================================= */

.hero-final{
    height:405px!important;
    min-height:405px!important;
    position:relative!important;
    overflow:hidden!important;

    /*
      Фото больше не растягиваем по высоте Hero.
      100% ширины сохраняет исходную пропорцию 5.698:1.
    */
    background-image:
      linear-gradient(
        90deg,
        rgba(3,18,32,.88) 0%,
        rgba(3,18,32,.66) 24%,
        rgba(3,18,32,.17) 49%,
        rgba(3,18,32,0) 75%
      ),
      url("/v40-ui/assets/home/v2/01_hero_main.jpg")!important;

    background-repeat:no-repeat,no-repeat!important;

    /* КЛЮЧЕВОЕ: ширина 100%, высота фотографии AUTO */
    background-size:100% 333px, 100% auto!important;

    /* Картинку прижимаем к верхней части Hero */
    background-position:center top, center top!important;

    background-color:#061a2a!important;
}

/* Контент теперь начинается прямо поверх фотографии */
.hero-final__content{
    padding-top:42px!important;
}

/*
   Нижняя полоса — отдельная часть Hero.
   Она не должна заставлять фотографию растягиваться.
*/
.hero-final__trust{
    position:absolute!important;
    left:0!important;
    right:0!important;
    bottom:0!important;

    height:72px!important;

    background:rgba(3,20,34,.96)!important;
    border-top:1px solid rgba(255,255,255,.15)!important;

    z-index:10!important;
}

/*
   На широких мониторах исходное соотношение всё равно сохраняем.
   Высоту фотографии браузер получает из её ширины.
*/
@media(min-width:1500px){
    .hero-final{
        background-size:100% 333px, 100% auto!important;
        background-position:center top, center top!important;
    }
}

/* Не даём старым правилам масштабирования вмешиваться */
.hero-final::before,
.hero-final::after{
    pointer-events:none!important;
}

/* Каталог начинается уже ПОСЛЕ всего Hero */
#catalog{
    margin-top:0!important;
    transform:none!important;
    top:auto!important;
}

/* =========================================================
   HERO APPROVED FINAL
   Фото доходит вниз ровно до панели преимуществ
   ========================================================= */

.hero-final{
    height:480px!important;
    min-height:480px!important;
    position:relative!important;
    overflow:hidden!important;
    background-color:#061a2a!important;

    /*
      408px — фотография
       72px — нижняя тёмная панель
      Итого 480px.
    */
    background-image:
      linear-gradient(
        90deg,
        rgba(3,18,32,.87) 0%,
        rgba(3,18,32,.64) 23%,
        rgba(3,18,32,.16) 48%,
        rgba(3,18,32,0) 74%
      ),
      url("/v40-ui/assets/home/v2/01_hero_main.jpg")!important;

    background-repeat:no-repeat,no-repeat!important;

    /*
      Главное изменение:
      изображение занимает всю ширину и 408px по высоте.
      Нижний край изображения подходит прямо к панели.
    */
    background-size:100% 408px, 100% 408px!important;
    background-position:center top, center top!important;
}

/* Текст располагается внутри фотографии */
.hero-final__inner{
    width:min(1760px,calc(100% - 80px))!important;
    height:100%!important;
    margin:0 auto!important;
    position:relative!important;
}

.hero-final__content{
    width:570px!important;
    padding-top:52px!important;
    position:relative!important;
    z-index:5!important;
}

.hero-final__eyebrow{
    margin-bottom:14px!important;
}

.hero-final h1{
    width:570px!important;
    max-width:570px!important;
    margin:0 0 14px!important;
    font-size:36px!important;
    line-height:1.03!important;
}

.hero-final__content p{
    width:520px!important;
    max-width:520px!important;
    margin:0 0 20px!important;
    font-size:14px!important;
    line-height:1.42!important;
}

.hero-final__buttons{
    position:relative!important;
    z-index:6!important;
}

/* Нижняя полоса — отдельная, строго 72px */
.hero-final__trust{
    position:absolute!important;
    left:0!important;
    right:0!important;
    bottom:0!important;

    width:100%!important;
    height:72px!important;
    min-height:72px!important;

    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    align-items:center!important;

    background:rgba(2,20,34,.97)!important;
    border-top:1px solid rgba(255,255,255,.18)!important;

    z-index:20!important;
}

/* Убираем влияние предыдущих правил масштаба */
@media(min-width:1500px){
    .hero-final{
        height:480px!important;
        min-height:480px!important;
        background-size:100% 408px,100% 408px!important;
        background-position:center top,center top!important;
    }
}

/* Каталог начинается только после Hero */
#catalog{
    position:relative!important;
    margin-top:0!important;
    top:auto!important;
    transform:none!important;
}

/* Планшет */
@media(max-width:1100px){
    .hero-final{
        height:480px!important;
        min-height:480px!important;
        background-size:auto 408px,auto 408px!important;
        background-position:center top,center top!important;
    }

    .hero-final__inner{
        width:calc(100% - 40px)!important;
    }
}

/* Телефон */
@media(max-width:700px){
    .hero-final{
        height:520px!important;
        min-height:520px!important;
        background-size:auto 448px,auto 448px!important;
        background-position:55% top,55% top!important;
    }

    .hero-final__trust{
        height:72px!important;
    }
}

/* =========================================================
   ROUTE FINAL — CLEAN LOGISTICS BLOCK
   Убираем старую карту, города и стрелки.
   Оставляем компактную фотографию справа.
   ========================================================= */

.route-reference{
    position:relative!important;
    overflow:hidden!important;

    min-height:440px!important;
    padding:54px 0!important;

    /* Никакой старой карты в фоне */
    background:#062139!important;
    background-image:none!important;
}

/* Две нормальные колонки */
.route-reference .route-layout{
    width:min(1480px,calc(100% - 80px))!important;
    min-height:330px!important;
    margin:0 auto!important;

    display:grid!important;
    grid-template-columns:minmax(420px,.82fr) minmax(560px,1.18fr)!important;
    gap:70px!important;
    align-items:center!important;
}

/* Левая текстовая часть */
.route-reference .route-copy{
    padding:0!important;
    position:relative!important;
    z-index:3!important;
}

.route-reference .route-copy h2{
    margin:8px 0 20px!important;
    max-width:620px!important;
    font-size:46px!important;
    line-height:1.08!important;
}

.route-reference .route-copy p{
    max-width:610px!important;
    margin-bottom:25px!important;
    font-size:17px!important;
    line-height:1.65!important;
}

/*
   Правая область.
   Старую CSS-карту превращаем просто в фотокарточку.
*/
.route-reference .route-map{
    position:relative!important;

    width:100%!important;
    max-width:720px!important;
    height:310px!important;

    justify-self:end!important;
    margin:0!important;

    transform:none!important;

    border:1px solid rgba(126,194,235,.38)!important;
    border-radius:14px!important;
    overflow:hidden!important;

    background:
      url("/v40-ui/assets/home/v2/03_banner_delivery.jpg")
      center center / cover no-repeat!important;

    box-shadow:0 18px 45px rgba(0,0,0,.22)!important;
}

/* УБИРАЕМ старый рисунок карты */
.route-reference .route-map::before,
.route-reference .route-map::after{
    display:none!important;
    content:none!important;
}

/* УБИРАЕМ АЗИЮ */
.route-reference .route-map .route-origin,
.route-reference .route-map .route-hub,
.route-reference .route-map [class*="origin"],
.route-reference .route-map [class*="hub"]{
    display:none!important;
}

/* УБИРАЕМ Москва / Уфа / Новосибирск / Владивосток и т.п. */
.route-reference .route-city,
.route-reference [class*="route-city"]{
    display:none!important;
}

/* УБИРАЕМ все старые синие линии и стрелки */
.route-reference .route-line,
.route-reference [class*="route-line"]{
    display:none!important;
}

/*
   На случай если старая схема содержит SVG:
   внутри route-map никакой графики поверх фотографии.
*/
.route-reference .route-map svg,
.route-reference .route-map canvas{
    display:none!important;
}

/* Не показываем старые абсолютные подписи внутри картинки */
.route-reference .route-map > div{
    display:none!important;
}

/* Tablet */
@media(max-width:1100px){
    .route-reference{
        min-height:0!important;
        padding:44px 0!important;
    }

    .route-reference .route-layout{
        width:calc(100% - 48px)!important;
        grid-template-columns:1fr!important;
        gap:28px!important;
    }

    .route-reference .route-map{
        width:100%!important;
        max-width:none!important;
        height:300px!important;
        justify-self:stretch!important;
    }
}

/* Mobile */
@media(max-width:700px){
    .route-reference{
        padding:34px 0!important;
    }

    .route-reference .route-layout{
        width:calc(100% - 28px)!important;
    }

    .route-reference .route-copy h2{
        font-size:31px!important;
    }

    .route-reference .route-copy p{
        font-size:15px!important;
    }

    .route-reference .route-map{
        height:220px!important;
    }
}