/* @import "https://unpkg.com/open-props"; */
@import "https://unpkg.com/open-props/normalize.min.css";

.bluwe{
    color: #0033A0 !important;
  }

.media-scroller{
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 22%;
    gap: 1rem;
    padding-bottom: 1rem;
    /* padding-inline: 1rem; */

    overflow-x: auto;
    overscroll-behavior-inline: contain;

}

/* For extra small screens (Bootstrap's default breakpoint) */
.media-scroller {
    grid-auto-columns: 43%; /* Adjust column size for small screens */
}

/* For small screens (≥576px) */
@media (min-width: 576px) {
    .media-scroller {
        grid-auto-columns: 33.33%; /* Adjust column size for small screens */
    }
}

/* For medium screens (≥768px) */
@media (min-width: 768px) {
    .media-scroller {
        grid-auto-columns: 25%; /* Adjust column size for medium screens */
    }
}

/* For large screens (≥992px) */
@media (min-width: 992px) {
    .media-scroller {
        grid-auto-columns: 22%; /* Adjust column size for large screens */
    }
}



.snaps-inline{
    scroll-snap-type: inline mandatory;
    /* scroll-padding-inline: 1rem; */
}

.snaps-inline > *{
    scroll-snap-align: start;
}

/* Scroll Bar */
.media-scroller::-webkit-scrollbar {
    width: 1rem;
    height: 10px;
  }
  
  .media-scroller::-webkit-scrollbar-track {
    background: hsla(0, 0%, 0%, 0.149);
    border-radius: 100vw;
    margin-block: 0.5em;
  }
  
  .media-scroller::-webkit-scrollbar-thumb {
    background: hsla(0, 0%, 0%, 0.256);
    border: 0.25em hsla(0, 0%, 0%, 0.41/ 0.5);
    border-radius: 100vw;
  }
  
  .media-scroller::-webkit-scrollbar-thumb:hover {
    background: hsla(0, 0%, 0%, 0.407);
  }


  /* border line */
.border-line{
    border-bottom: 4px;
    border-style: solid;
    border-image: linear-gradient(to left, #FFD700, #998100) 1;
}