@import url("cards.css");
@import url("buttons.css");

.metals-grid {
    display: flex;
    overflow-x: auto;
    gap: 20px;
    padding: 20px;
    margin: -20px;
    scroll-snap-type: x mandatory;
    scroll-padding: 20px;
    scroll-behavior: smooth;
    position: relative;
    mask: linear-gradient(
        90deg,
        transparent 0%,
        #fff 10%,
        #fff 90%,
        transparent 100%
    );
    -webkit-mask: linear-gradient(
        90deg,
        transparent 0%,
        #fff 10%,
        #fff 90%,
        transparent 100%
    );
}

.metal-card {
    min-width: 250px;
    scroll-snap-align: start;
}

.metals-grid::-webkit-scrollbar {
    display: none;
}

.metals-grid {
    -ms-overflow-style: none;
    scrollbar-width: none;
}


.med .metal-icon i {
  color: #d35400;
}

.bronza .metal-icon i {
  color: #cd7f32;
}

.latun .metal-icon i { color: #b5a642; }

.alyuminiy .metal-icon i {
  color: #a8a8a8;
}

.svinets .metal-icon i {
  color: #5a5a5a;
}

.titan .metal-icon i {
  color: #878681;
}

.btn-container {
  text-align: center;
}