@import (reference) '../../../../theme-default/styles/variables.less';

.dumi-site-who-are-using {
  list-style: none;
  margin: 16px 0 24px -2%;
  padding: 0;

  &::before,
  &::after {
    content: '';
    display: table;
    clear: both;
  }

  li {
    float: left;
    margin-left: 2%;
    margin-bottom: 16px;
    width: 18%;
    padding: 0 32px;
    box-sizing: border-box;
    border: 1px solid @c-border-light;
    background-color: #fff;
    border-radius: 4px;
    transition: all 0.2s;

    @{dark-selector} & {
      border-color: lighten(@c-site-bg-dark, 15%);
      background-color: lighten(@c-site-bg-dark, 12%);
    }

    @media @mobile {
      width: 48%;
      padding: 0 12px;
    }

    &:hover {
      transform: translateY(-1px);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 5%);
    }

    > a {
      display: flex;
      height: 76px;
      color: #333;
      text-decoration: none;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      font-weight: bold;

      @{dark-selector} & {
        color: @c-text-secondary-dark;
      }

      @media @mobile {
        height: 64px;
        font-size: 15px;
      }

      > img {
        margin-right: 12px;
        max-width: 90%;
        max-height: 42px;

        @media @mobile {
          max-height: 36px;
        }
      }
    }
  }
}
