.mission-scroll-wrapper .e-con-inner {
    /* This tells the browser to optimize for transform changes, leading to smoother animations. */
    will-change: transform;
    /* Ensure the track doesn't wrap its children */
    flex-wrap: nowrap;
}

.mission-scroll--outer-wrapper {
    /* This is crucial. It ensures that the content scrolling horizontally
       is not cut off by the parent container. */
    overflow: visible !important;
}


.our-mission-grad{
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(50% + 650px); 
    width: calc(50vw - 650px); 
    pointer-events: none;
}


.mission-scroll-cell{
    background-color: var(--darkBlue);
    color: var(--white);
    border: 1px solid var(--white);
    min-width: 430px;
    height: 350px;
    transition: background-color .4s ease-in-out;
    cursor: pointer;
}
.mission-scroll-cell:hover{
    background-color: var(--primaryBlue);
}
    @media (max-width: 1024px) {
      .mission-scroll-cell {
          width: 350px;
          height: 300px;
      }
    }
  
  @media (max-width: 767px) {
       .mission-scroll-cell{
          padding: var(--gap-s);
          width: 100%;
          height: 250px;
      }
    }


    
    /*grid base */

    .tile-buttons {
    background-color: var(--darkBlue);
    flex: 1 1 calc((100% - (2 * var(--gap-s))) / 3)!important;
max-width: 100%;
    color: var(--white);
    border: 1px solid var(--white);
    min-height: 350px;
    transition: background-color .4s ease-in-out;
    cursor: pointer;
}
.tile-buttons:hover, .tile-buttons:focus{
    background-color: var(--primaryBlue);
}
    @media (max-width: 1024px) {
      .tile-buttons {
        flex: 1 1 calc((100% - var(--gap-s)) / 2)!important;
        min-height: 300px;
      }
    }
  
  @media (max-width: 767px) {
       .tile-buttons{
        position: sticky;
        top: 20px; 
          padding: var(--gap-s);
          flex: 1 1 100%!important;
          min-height: 250px;
      }
    }



.tile-buttons.clear-tiles{
    background:none;
    border:1px solid var(--grey);
    color: #000;
}
.tile-buttons.clear-tiles:hover, .tile-buttons.clear-tiles:focus{
    background: var(--white);
}



.tile-buttons.active {
    background-color: var(--primaryBlue);
      pointer-events: none;
  }