.supplierLetters {display:flex; justify-content:center; align-items:center; gap: 10px; flex-wrap:wrap;}
.supplierLetters span {display:block; border: 1px solid var(--gray); padding: 5px 10px; color:var(--gray); cursor:pointer;}
.supplierLetters span.on,
.supplierLetters span:hover {background:var(--gray); color:#fff; }

.text {margin: 20px 0 40px 0;}

.suppliersList { display: flex; flex-wrap: wrap; justify-content:flex-start; margin: 2.375rem auto 0px; max-width: 1200px; }
    .suppliersList .supplierLetter { width: calc(33.3333% - 3.75rem); margin: 0px 1.875rem 5rem; display: flex; align-items: flex-start; gap: 20px; }
        .suppliersList .supplierLetter .letter { width: 50px; font-weight: 700; color: var(--gray); font-size: 32px; text-transform: uppercase; display:flex; justify-content:flex-end; align-items:flex-start; line-height:1em; }
        .suppliersList .supplierLetter .suppliers a {display:block; margin: 0 0 20px 0; font-size:18px;}

@media only screen and (max-width: 850px) {
    .suppliersList .supplierLetter { width: calc(50% - 3.75rem); }

}

@media only screen and (max-width: 600px) {
    .suppliersList .supplierLetter { width: 100%; margin: 0 0 20px 0; flex-direction:column; }
        .suppliersList .supplierLetter .letter { font-size: 24px; display:block;; }


}

    @media only screen and (max-width: 480px) {
        .supplierLetters span { font-size: 14px; padding: 3px 6px; }
        .text { margin: 10px 0 20px 0; }
    }