body {
  background: #eee;
}

@media (min-width: 576px) and (max-width: 767px) {
  .container {
    width: 100%;
    max-width: 100%;
  }
}

.album {
  padding-top: 16px;
}

.items {
  display: grid;
  /* 最小100px、最大1frの列を繰り返しつくる */
  grid-template-columns: repeat(
    auto-fill,
    minmax(196px, 1fr)
  );
  gap: 16px;
}

.item img {
  max-width: 100%;
  height: auto;
}

.card-title {
  margin-top: 0.75em;
  font-size: 100%;
  font-weight: bold;
}

.card-text {
  font-size: 85%;
  color: #666;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

footer {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

footer p {
  margin-bottom: .25rem;
}