#main {
  margin-top: clamp(47px, 200rem, 140px);
}

main * {
  font-size: clamp(15px, 40rem, 24px);
  font-weight: 500;
}

#main h1 {
  color: var(--accent-text);
  text-align: center;
  font-size: var(--text-2);
}

.archive-header {
  text-align: left;
  margin-bottom: 20px;
}

.keisy-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px;
}

.keisy-item a {
  background: #f6f6f8;
  border-radius: 12px;
  padding: 22rem;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .04);
  display: block;
}

.keisy-thumb-img {
  max-width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  margin: 0 auto 12px;
  border-radius: 20px;
}

.keisy-item-title {
  font-size: 18rem;
  margin-bottom: 12px;
  color: #000;
  font-weight: 600;
}

@media (max-width: 1024px) {
  .keisy-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .keisy-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 470px) {
  .keisy-grid {
    grid-template-columns: 1fr;
  }
}