style.css

.container {
  padding-top: 3vh;
  width: 100%;
  margin: auto;
  columns: 6;
  column-gap: 20px;
}
.container .box {
  width: 100%;
  margin-bottom: 10px;
  break-inside: avoid;
  border-radius: 15px;
}
.container .box img {
  max-width: 100%;
  min-width: 100%;
  border-radius: 10px;
}

img:hover {
  opacity: 0.95;
}

.caption {
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  padding: 2px;
}

@media (max-width: 1427px) {
  .container {
    columns: 5;
    width: calc(100% - 40px);
  }
}
@media (max-width: 1200px) {
  .container {
    columns: 4;
  }
}

@media (max-width: 1000px) {
  .container {
    columns: 3;
  }

  body {
    overflow-x: hidden;
  }
}

@media (max-width: 786px) {
  .container {
    columns: 2;
  }
}

@media (max-width: 480px) {
  .container {
    columns: 1;
  }
}