/**
 * Multi Items Block Styles
 */

.brands-grid-block {
  .brands-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 20px;

    @media (max-width: 575px) {
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }
  }
  .brand-item {
    border-radius: var(--wd-brd-radius);
    padding: var(--wd-prod-bg-sp);
    background-color: #fff;
    overflow: hidden;
    transition: box-shadow 0.3s ease-in-out;
    will-change: box-shadow;

    .brand-name {
      padding-bottom: 10px;
      h3 {
        font-size: 15px;
        text-align: center;
        margin-bottom: 0;
      }
    }

    &:hover {
      box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
    }
  }
}