@media screen {

/* =====================
   BASE
===================== */

html {
  overflow-y: scroll;
}

body {
  background: black;
  color: white;
  font: 16px Tahoma, Geneva, sans-serif;
}

#wrapper {
  width: 100%;
  margin: 0 auto;
}

/* =====================
   ARCHIVE GRID
===================== */

.content-wrapper {
  width: 100%;
  margin: 50px auto;
}

.content-wrapper:first-child {
  margin: 17px auto;
}

.content-wrapper:last-child {
  margin: 17px auto;
}

.content {
  background: #333;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 14px;
  margin: 0 17px 17px 17px;
  padding: 14px;
}

/* =====================
   ARCHIVE ITEMS
===================== */

.archive-item {
  background: #111;
  border: 3px solid transparent;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.archive-item:hover {
  border-color: white;
  transform: scale(0.98);
}

/* Image wrapper */
.archive-item a:first-child {
  display: block;
}

/* UNIFORM IMAGE SIZE */
.archive-item img {
  width: 100%;
  aspect-ratio: auto;
  object-fit: fill;
  display: block;
}

/* Label */
.archive-item-text {
  display: block;
  background-color: #333;
  color: white;
  text-decoration: none;
  padding: 10px 0;
  text-align: center;
}

/* =====================
   TYPOGRAPHY
===================== */

p {
  padding-bottom: 10px;
}

a {
  color: #87A14A;
}

a:hover {
  color: white;
  text-decoration: none;
}

.site-title {
  font-family: 'NTR', sans-serif;
  font-size: 40px;
  color: white;
}

h2 {
  font-family: 'NTR', sans-serif;
  font-size: 2rem;
  color: white;
  padding: 5px 0 0 25px;
  margin: 0 17px;
  background: #555;
}

/* =====================
   UTILITIES (kept)
===================== */

.left { float: left; }
.right { float: right; }
.alignleft { float: left; margin: 0 20px 20px 0; }
.alignright { float: right; margin: 0 0 20px 20px; }
.aligncenter { display: block; margin: 0 auto; }

} /* END screen */

/* =====================
   MOBILE TWEAK
===================== */

@media (max-width: 600px) {
  #content {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
}