body.essays-page { overflow-x: clip; }
body.essays-page .parent-div {
  height: auto;
  min-height: 100vh;
  overflow-x: clip;
  overflow-y: visible;
  padding: 0;
}
body.essays-page .macbook-air--without-pink {
  position: relative;
  height: auto;
  min-height: 100vh;
  aspect-ratio: auto;
  overflow-x: clip;
  overflow-y: visible;
  display: flow-root;
}
body.essays-page .essays-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  width: calc(100% - 3.9%);
  margin: 245px auto 48px;
}
body.essays-page .essay-tile {
  display: block;
  min-width: 0;
  color: #111;
  text-decoration: none;
}
body.essays-page .essay-tile img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 200ms ease;
}
body.essays-page .essay-title,
body.essays-page .essay-date {
  display: block;
  font-family: 'Roboto Mono', monospace;
  font-weight: 400;
  line-height: 1.5;
}
body.essays-page .essay-title { margin-top: 10px; font-size: 14px; color: #111; transition: color 200ms ease; }
body.essays-page .essay-date { margin-top: 4px; font-size: 12px; color: #575757; }
body.essays-page .essay-tile:hover img,
body.essays-page .essay-tile:focus-visible img { transform: translateY(-2px); }
body.essays-page .essay-tile:hover .essay-title,
body.essays-page .essay-tile:focus-visible .essay-title { color: #3B1DFF; }
@media (min-width: 769px) and (max-width: 1199px) {
  body.essays-page .essays-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  body.essays-page .essays-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 90px; margin-bottom: 32px; }
  body.essays-page .essay-title { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  body.essays-page .essay-tile img { transition: none; }
  body.essays-page .essay-tile:hover img,
  body.essays-page .essay-tile:focus-visible img { transform: none; }
}
/* Preserve the title's original viewport-based offset as the grid grows. */
body.essays-page .modern-day { top: calc(11.9808 * var(--ratio)); }
@media (max-width: 768px) {
  body.essays-page .modern-day { top: 1.44vh; }
}