/* ===== NOYTRIX MOBILE EXPERIENCE CAROUSEL — MOBILE ONLY ===== */
@media screen and (max-width: 768px){

  #mobile-experience{
    padding: 42px 0 34px !important;
    overflow: hidden !important;
  }

  #mobile-experience .mx-wrap{
    padding: 0 !important;
    max-width: 100% !important;
  }

  #mobile-experience .mx-head{
    padding: 0 18px !important;
    margin: 0 auto 22px !important;
  }

  #mobile-experience .mx-head h2{
    font-size: clamp(28px, 8vw, 42px) !important;
    line-height: 1.04 !important;
    text-align: center !important;
  }

  #mobile-experience .mx-head p{
    font-size: 15px !important;
    line-height: 1.55 !important;
    text-align: center !important;
  }

  #mobile-experience .mx-grid{
    display: flex !important;
    grid-template-columns: none !important;
    gap: 14px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scroll-padding-left: 18px !important;
    padding: 4px 18px 22px !important;
    margin-top: 18px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #mobile-experience .mx-grid::-webkit-scrollbar{
    display: none !important;
  }

  #mobile-experience .mx-shot{
    flex: 0 0 205px !important;
    width: 205px !important;
    max-width: 205px !important;
    scroll-snap-align: center !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    background:
      linear-gradient(180deg, rgba(18,24,42,.96), rgba(7,10,20,.98)) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    box-shadow:
      0 18px 46px rgba(0,0,0,.42),
      inset 0 1px 0 rgba(255,255,255,.06) !important;
    transform: none !important;
  }

  #mobile-experience .mx-shot:first-child{
    margin-left: calc((100vw - 205px) / 2 - 18px) !important;
  }

  #mobile-experience .mx-shot:last-child{
    margin-right: calc((100vw - 205px) / 2 - 18px) !important;
  }

  #mobile-experience .mx-shot img{
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  #mobile-experience::after{
    content: "Swipe";
    display: block !important;
    width: max-content !important;
    margin: -6px auto 0 !important;
    padding: 7px 14px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,176,32,.22) !important;
    background: rgba(255,176,32,.06) !important;
    color: #ffd27d !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
  }
}