/* /archives — the gallery's earlier websites. See templates/archives.php. */

.archives {
  max-width: var(--page-width);
  margin: 0 auto 100px;
}

.archives .page-title {
  text-transform: uppercase;
  font-size: var(--font-size-2);
  letter-spacing: 1px;
  margin: 40px 0;
}

.archives__list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 40px;
}

.archives__site {
  display: block;
  text-decoration: none;
}

/* Each home page whole, in a bordered frame of one height: coststudio.com's
   page fills it (960 × 710), and a taller page is shrunk to its height and
   centred in it. */
.archives__frame {
  display: flex;
  justify-content: center;
  aspect-ratio: 960 / 710;
  padding: 16px;
  border: 1px solid var(--color-3);
  margin-bottom: 14px;
}

/* contain: the padding leaves the frame's inside a little off 960 × 710, so
   a page that fills it is fitted rather than stretched. */
.archives__site img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
}

.archives__site strong {
  display: block;
  font-weight: normal;
  font-size: var(--font-size-2);
}

.archives__site span {
  display: block;
  font-family: var(--font-family-2);
  font-size: var(--font-size-8);
  color: var(--color-7);
}

.archives__site .archives__credit {
  margin-top: 4px;
  font-size: var(--font-size-4);
  color: var(--color-4);
}

/* The site's outlined button (.b-button in blocks.css), part of the card's
   link rather than a link of its own, so it fills when the card is hovered. */
.archives__site .archives__button {
  display: inline-block;
  margin-top: 20px;
  padding: 14px 30px;
  border: 1px solid var(--color-2);
  border-radius: 4px;
  font-family: var(--font-family-1);
  font-size: var(--font-size-7);
  color: var(--color-2);
}

.archives__site:hover .archives__button {
  background: var(--color-2);
  color: var(--color-1);
}

.archives__site:hover .archives__frame { border-color: var(--color-5); }
.archives__site:hover strong { color: var(--color-5); }

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