/*==================================================
ギャラリーのためのcss
===================================*/
.gallery {
  columns: 4;
  /*段組みの数*/
  padding: 0 20px;
  /*ギャラリー左右に余白をつける*/
  margin: 0;
}

.gallery li {
  margin-bottom: 0px;
  /*各画像下に余白をつける */
  list-style: none;
} 

.gallery  {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 20px;
}

/*ギャラリー内のイメージは横幅100%にする*/
.gallery img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
  /*画像の下にできる余白を削除*/
}

/* 横幅900px 以下の段組み設定 */
@media only screen and (max-width: 900px) {
  .gallery {
    columns: 3;
  }
}

@media only screen and (max-width: 768px) {
  .gallery {
    columns: 2;
  }
}

@media only screen and (max-width: 350px) {
  .gallery {
    columns: 1;
  }
}