.ml {
   display: flex;
   gap: 12px;
   align-items: center;
   justify-content: flex-start;
   overflow-x: auto;
   position: relative;
}

/* Стилизация скроллбара */
.ml::-webkit-scrollbar {
    width: 10px; /* Ширина скроллбара */
    height: 10px;
  }
  
  .ml::-webkit-scrollbar-track {
    background: #2c2f38; /* Цвет фона трека (светло-серый) */
    border-radius: 10px; /* Закругленные углы */
  }
  
  .ml::-webkit-scrollbar-thumb {
    background-color: #7d8494; /* Цвет скроллбара (серый) */
    border-radius: 10px; /* Закругленные углы */
    border: 3px solid #2c2f38; /* Отступ и цвет вокруг скроллбара */
  }
  
  .ml::-webkit-scrollbar-thumb:hover {
    background-color: #888; /* Цвет скроллбара при наведении (темнее серый) */
  }


.ml_item {
   display: flex;
   gap: 10px;
   flex-direction: column;
   align-items: center;
   width: 100%;
   border-radius: 20px;
   border: 1px solid #2A2F3C;
   background: linear-gradient(180deg, #2A2E3A 0%, #1E2432 100%);
   padding: 12px 20px;
   margin-bottom: 20px;
   min-width: 100px;
   flex-shrink: 0;
   max-width: max-content;
}

.ml_item:hover {
    border: 1px solid #343B4E;
    background: linear-gradient(180deg, #293146 0%, #20283B 100%);
    box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.25);
}

.ml_item i {
    color: #0582EE;
    font-size: 50px;
}

.ml_item span {
   color: #FFF;
   font-size: 16px;
   text-align: center;
   line-height: 1.2;
   font-weight: 600;

}

.ml_item:hover span {
   color: #0582EE;
}

@media (max-width: 650px) {
    .ml_item i {
        font-size: 36px;
    }

    .ml_item span {
        font-size: 14px;

    }

    .ml_item {
        padding: 12px 6px;
        min-width: 50px;
        border-radius: 10px;
    }
}