.image-list figure::before {
  content: "";
  display: block;
  padding-top: 57.5%;
}

/*@media screen and (min-width: calc(400px * 2 + var(--img-card-gap) + var(--page-padding-h) * 2)) {*/
@media screen and (min-width: 826px) { /* 3列 */
  .image-list figure {
    flex-basis: calc((100% - var(--img-card-gap) * 2) / 3);
  }
}
/*@media screen and (min-width: calc(400px * 3 + var(--img-card-gap) * 2 + var(--page-padding-h) * 2)) {*/
@media screen and (min-width: 1232px) { /* 4列 */
  .image-list figure {
    flex-basis: calc((100% - var(--img-card-gap) * 3) / 4);
  }
}
/*@media screen and (min-width: calc(400px * 4 + var(--img-card-gap) * 3 + var(--page-padding-h) * 2)) {*/
@media screen and (min-width: 1638px) { /* 5列 */
  .image-list figure {
    flex-basis: calc((100% - var(--img-card-gap) * 4) / 5);
  }
}
/*@media screen and (min-width: calc(400px * 5 + var(--img-card-gap) * 4 + var(--page-padding-h) * 2)) {*/
@media screen and (min-width: 2044px) { /* 6列 */
  .image-list figure {
    flex-basis: calc((100% - var(--img-card-gap) * 5) / 6);
  }
}
/*@media screen and (min-width: calc(400px * 6 + var(--img-card-gap) * 5 + var(--page-padding-h) * 2)) {*/
@media screen and (min-width: 2450px) { /* 7列 */
  .image-list figure {
    flex-basis: calc((100% - var(--img-card-gap) * 6) / 7);
  }
}
/*@media screen and (min-width: calc(400px * 7 + var(--img-card-gap) * 6 + var(--page-padding-h) * 2)) {*/
@media screen and (min-width: 2856px) { /* 8列 */
  .image-list figure {
    flex-basis: calc((100% - var(--img-card-gap) * 7) / 8);
  }
}