.shorts-shell {
  max-width: 44rem;
  margin: 0 auto 5rem;
}

.shorts-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  margin-bottom: 2.75rem;
}

.shorts-heading h1 {
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1.15;
}

.shorts-heading p {
  margin-top: .75rem;
  color: #686868;
  line-height: 1.5;
}

.shorts-timeline > li + li { border-top: 1px solid #e9e9e9; }
.shorts-timeline { border-top: 1px solid #e9e9e9; border-bottom: 1px solid #e9e9e9; }

.short-card {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 1rem;
  padding: 1.75rem 0;
}

.short-avatar {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: #171717;
  color: #fff;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: -.03em;
}

.short-meta { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .75rem; row-gap: .15rem; margin: 0 0 .6rem; }
.short-author { font-size: .9375rem; font-weight: 600; }
.short-date, .short-permalink { color: #686868; font-size: .8125rem; }
.short-date:hover, .short-permalink:hover, .shorts-feed:hover { color: #111; text-decoration: underline; }
.short-body { overflow-wrap: anywhere; }
.short-body p { margin-bottom: .8rem; }
.short-body figure { margin: 1rem 0; }
.short-body img { max-height: 36rem; width: auto; object-fit: contain; border-radius: .8rem; }
.short-body pre { max-width: 100%; }
.short-permalink { display: inline-block; margin-top: 1rem; }

.short-images {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .35rem;
  margin-top: 1rem;
  overflow: hidden;
  border: 1px solid #e9e9e9;
  border-radius: .8rem;
}

.short-images a { overflow: hidden; background: #f4f4f4; }
.short-images img { display: block; width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; }
.short-images[data-count="1"] { grid-template-columns: 1fr; }
.short-images[data-count="1"] img { height: auto; max-height: 36rem; aspect-ratio: auto; object-fit: contain; }
.short-images[data-count="3"] a:first-child { grid-row: span 2; }
.short-images[data-count="3"] a:first-child img { aspect-ratio: auto; }
.shorts-feed { display: inline-block; margin-top: 1.5rem; font-size: .875rem; color: #686868; }
.shorts-shell .pagination { padding-top: 2rem; }
.shorts-empty { padding: 3rem 0; border-block: 1px solid #e9e9e9; color: #686868; line-height: 1.6; }
.shorts-detail-heading { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; font-size: .875rem; color: #686868; }
.shorts-back { display: inline-block; margin-bottom: 1.5rem; font-size: .875rem; color: #686868; }

@media (max-width: 40rem) {
  .shorts-heading { flex-wrap: wrap; gap: 1.25rem; margin-bottom: 2rem; }
  .short-card { grid-template-columns: 2rem minmax(0, 1fr); gap: .75rem; }
  .short-avatar { width: 2rem; height: 2rem; font-size: .7rem; }
  .short-date { font-size: .75rem; }
}