.family-site-wrap {
  position: relative; margin: 70px 0;
  ul {
    position: relative; border-top: 1px solid var(--line-color); border-right: 1px solid var(--line-color);
    li {
      position: relative; float: left; width: 25%; height: 0; padding-bottom:9%; border-bottom: 1px solid var(--line-color);border-left: 1px solid var(--line-color); 
      a {
        width: 100%; height: 100%;
        img { @include alignCenter; width: 200px; max-height: 45px; }
      }
      &.empty { background:#f8f8f8; }
    }
  }
}

@media (max-width: 1200px) {
  .family-site-wrap { margin: 50px 0; }
}

@media (max-width: 1024px) {
  .family-site-wrap {
    ul {
      li {
        a {
          img { max-width: 100%; }
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .family-site-wrap {
    ul {
      li {
        padding: 0; height: 60px; 
        a {
          img { max-width: calc(100% - 10px); width: 100%; max-height: 25px; }
        }
      }
    }
  }
}