/* common */
:root {
  --thumbnail-gap: 0;
}

body {
  margin: 0;
  background: white;
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
}

img{
	vertical-align:top;
}

ul {
  padding: 0;
  margin: 0;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
}

h1, h2, h3 {
  margin: 0;
  padding: 0;
  font-weight: normal;
  font-size: 20px;
  letter-spacing: 2px;
}

p {
  margin: 0;
  padding: 0;
  font-size: 16px;
}

/* main */
.main-container {
  width: 60%;
  margin: 0 auto;
  margin-top: 16px;
}

.work {
  margin-top: 16px;
  padding-top: 16px;
  border-top:1px solid black;
}

.thumbnail-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--thumbnail-gap);
  width: 100%;
  height: 100%;;
}

.thumbnail {
  width: calc((100% - var(--thumbnail-gap) * 2) / 3);
  height: 100%;
  aspect-ratio: 16 / 9;
  background: blue;
}

.thumbnail img {
  width: 100%;
  display:block;
}
 .credit {
  margin-top: 16px;
 }

 .credit a {
  color: blue;
 }

.other-works {
  height: 100%;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid black;
}

.other-works a {
  color: black;
}

.other-works a:hover {
  opacity: .5;
}

.other-works ul {
  padding-left: 1em;
}

@media screen and (max-width:768px) {
  .main-container {
    width: 90%;
  }

  .thumbnail {
    width: calc((100% - var(--thumbnail-gap) * 1) / 2);
  }
}