.video-col-section--container .video-col--column {
    width:33.3%!important;
    width:calc(100% / 3 - 1.5rem)!important;
    margin: 1rem 0.5rem;
}
.video-col-section--container .video-col--container {
    position:relative;
    z-index:1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.video-col-section--container .video-col--content {
  padding: 0 0.5rem;
}
.video-col-section--container .column--video iframe{
  overflow: hidden;
  border-radius: 10px;
}

@media (max-width: 980px) {
  .video-col-section--container .video-col--column {
    width:48%!important;
    width:calc(100% / 2 - 1.5rem)!important;
    margin: 1rem 0.5rem;
  }
}

{% scope_css %}
/* Restores Desktop Width */
.video-col--container {
  display: block; /* Returns to default HubSpot behavior */
  width: 100%;
}

/* Fixes the white space gap globally */
.section-header h2 { margin-bottom: 5px !important; }
.section-header p { margin-bottom: 0 !important; }

/* Arrows hidden on Desktop */
.nav-arrow { display: none !important; }

@media (max-width: 767px) {
  /* 1. Carousel Setup */
  .video-col--container {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    justify-content: flex-start !important; /* Starts slider at the very left */
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding-left: 0 !important; /* Ensures no left-side gap */
    padding-right: 20px !important;
    margin-top: 5px !important;
  }

  /* 2. Slide Alignment */
  .video-col--column {
    flex: 0 0 85% !important;
    width: 85% !important;
    margin-left: 15px !important; /* Small gap between items */
    scroll-snap-align: start; /* Snaps to the left edge instead of center */
    float: none !important;
    display: inline-block !important;
  }

  /* 3. Arrow Visibility & Positioning */
  .nav-arrow {
    display: flex !important;
    position: absolute;
    top: 55%;
    z-index: 99;
    background: #ffffff;
    border: 1px solid #ddd;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  }
  .nav-arrow.prev { left: 10px; } /* Pulls slightly out for better visibility */
  .nav-arrow.next { right: 10px; }

  .video-col--container::-webkit-scrollbar { display: none; }
}
{% endscope_css %}