section[data-cattype="236"]{ padding: 30px 0 50px 0; } [data-cattype="236"] ul.list-brand { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; } [data-cattype="236"] .brand-marquee { overflow: visible; } [data-cattype="236"] ul.list-brand li{ background-size: contain; background-repeat: no-repeat; background-position: center center; width: 16%; margin: 2%; min-height: 150px; filter: grayscale(1); position: relative; } [data-cattype="236"] ul.list-brand li:hover{ filter: grayscale(0); } [data-cattype="236"] ul.list-brand li a { display: block; } [data-cattype="236"] ul.list-brand li a img{ opaacity: 0; width: 100%; height: auto; } @media (max-width: 1400px) { } @media (min-width: 768px) and (max-width: 980px) { } @media (max-width: 767px) { section[data-cattype="236"] { padding: 10px 0 26px; } [data-cattype="236"] .brand-marquee { overflow: hidden; padding-right: 18vw; } [data-cattype="236"] ul.list-brand { flex-wrap: nowrap; justify-content: flex-start; gap: 12px; margin: 0; width: max-content; will-change: transform; } [data-cattype="236"] ul.list-brand li { flex: 0 0 34vw; width: 34vw; min-width: 34vw; max-width: 34vw; min-height: 18vw; margin: 0; filter: grayscale(1); } } @media (max-width: 480px) { section[data-cattype="236"]{ padding: 0 15px 18px; } [data-cattype="236"] .brand-marquee { padding-right: 20vw; } [data-cattype="236"] ul.list-brand li{ flex: 0 0 38vw; width: 38vw; min-width: 38vw; max-width: 38vw; min-height: 21vw; } }