/* Resources の各分類ページでは、一覧項目をコンパクトな横長カードにする。 */
.item-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.item {
  display: grid;
  min-height: 0;
  padding: 16px 20px;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "meta action"
    "title action"
    "description action";
  column-gap: 18px;
  align-items: center;
  border-radius: 18px;
}

.item > span { grid-area: meta; }
.item h2 { grid-area: title; margin: 4px 0 0; }
.item p { grid-area: description; margin: 5px 0 0; }
.item > div:last-child { grid-area: action; margin: 0; align-self: center; }
.item-link::after { grid-area: action; align-self: center; margin: 0; }

@media (max-width: 640px) {
  .item {
    min-height: 0;
    aspect-ratio: auto;
    padding: 14px 16px;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 12px;
  }

  .item h2 { font-size: .95rem; }
  .item p { font-size: .72rem; }
  .item > div:last-child { display: flex; flex-direction: column; gap: 5px; }
  .item > div:last-child .button { margin: 0; }
}