<div class="items">
  <div class="items__box">
    <div class="item">
      <img src='https://images.unsplash.com/photo-1467632499275-7a693a761056?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
    </div>
  </div>
  <div class="items__box">
    <div class="item">
      <img src='https://images.unsplash.com/photo-1467632499275-7a693a761056?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
    </div>
    <div class="item">
      <img src='https://images.unsplash.com/photo-1467632499275-7a693a761056?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
    </div>
  </div>
  <div class="items__box">
    <div class="item item_size_large">
      <img src='https://images.unsplash.com/photo-1467632499275-7a693a761056?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
    </div>
  </div>
  <div class="items__box">
    <div class="item">
      <img src='https://images.unsplash.com/photo-1467632499275-7a693a761056?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
    </div>
    <div class="item">
      <img src='https://images.unsplash.com/photo-1467632499275-7a693a761056?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
    </div>
  </div>
  <div class="items__box">
    <div class="item item_size_large">
      <img src='https://images.unsplash.com/photo-1467632499275-7a693a761056?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
    </div>
  </div>
  <div class="items__box">
    <div class="item">
      <img src='https://images.unsplash.com/photo-1467632499275-7a693a761056?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
    </div>
    <div class="item">
      <img src='https://images.unsplash.com/photo-1467632499275-7a693a761056?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
    </div>
  </div>
  <div class="items__box">
    <div class="item">
      <img src='https://images.unsplash.com/photo-1467632499275-7a693a761056?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
    </div>
  </div>
</div>

img {
  max-width: 100%;
  max-height: 100%;
}

.items {
  display: flex;
  align-items: center;
  justify-content: center;
}

.items__box {
  margin: 0 -20px;
}

.item {
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  overflow: hidden;
  background-color: #ccc;
  -webkit-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  margin: 10px 0;
  transition: .2s all;
}

.item_size_large {
  width: 300px;
  height: 300px;
}

.item:hover {
  filter: brightness(130%);
}


@media (max-width: 900px) {
  .items__box {
    margin: 0 -10px;
  }
  
  .item {
    width: 50px;
    height: 50px;
  }
  .item_size_large {
    width: 150px;
    height: 150px;
  }
}