*,
::before,
::after {
  outline: none;
}

@media (min-width: 420px) {
  .masonry {
    width: 400px;
  }
}

@media (min-width: 840px) {
  .masonry {
    width: 820px;
  }
}

@media (min-width: 1260px) {
  .masonry {
    width: 1240px;
  }
}

.masonry-item {
  float: left;

  width: 100%;

  margin-bottom: 20px;
}

@media (min-width: 420px) {
  .masonry-item {
    width: 400px;
  }
}

.list {
  margin: 0 auto;
}

.list-item {
  display: inline-block;

  width: 100%;

  margin-bottom: 20px;
}

@media (min-width: 420px) {
  .list {
    width: 400px;
  }

  .list-item {
    width: 400px;
  }
}

@media (min-width: 840px) {
  .list {
    width: 820px;
  }
}

@media (min-width: 840px) and (max-width: 1259px) {
  .list-item:not(:nth-child(2n + 2)) {
    margin-right: 20px;
  }
}

@media (min-width: 1260px) {
  .list {
    width: 1240px;
  }
}

@media (min-width: 1260px) {
  .list-item:not(:nth-child(3n + 3)) {
    margin-right: 20px;
  }
}