@charset 'utf-8';
/* ======================================================
CSS information

 File Name  : gallery.css
 Style Info : 「ギャラリー」のCSS
====================================================== */

#gallery-block.grid-items {
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem 2rem;
}

/* 768px～（タブレット）
------------------------------------------------------ */
@media (min-width: 768px) {

  #gallery-block.grid-items {
    gap: 2.5rem 3.5rem;
  }

}

/* 960px～（パソコン）
------------------------------------------------------ */
@media screen and (min-width: 960px) {

  #gallery-block.grid-items {
    grid-template-columns: repeat(3, 1fr);
    gap: 4rem 5rem;
  }

}

#gallery-block.grid-items .img-box img {
  object-fit: cover;
  aspect-ratio: 4 / 3;
  border-top-left-radius: 30px;
  border-bottom-right-radius: 10px;
}

/* 768px～（タブレット）
------------------------------------------------------ */
@media (min-width: 768px) {

  #gallery-block.grid-items .img-box img {
    border-top-left-radius: 40px;
    border-bottom-right-radius: 20px;
  }

}

/* 960px～（パソコン）
------------------------------------------------------ */
@media screen and (min-width: 960px) {

  #gallery-block.grid-items .img-box img {
    border-top-left-radius: 50px;
    border-bottom-right-radius: 30px;
  }

}