{{< card/post
  id="001"
  title="card/post short-codes"
  beg="0953"
  end="1020"
  url="26a91"
>}}

<style>
.post-card {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between; /* space between top row and bottom */
  width: 80px;
  height: 120px;
  margin: 0.3em;
  border: 1px solid var(--muted-border);
  border-radius: 8px;
  padding: 4px;
  background: var(--box-bg);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
  text-decoration: none;
  color: var(--fg);
}
.post-card:hover {
  transform: translateY(-2px);
  box-shadow: 3px 3px 8px color-mix(
    in srgb,
    var(--fg) 20%,
    transparent
  );
}
.post-card .top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  padding: 0 2px;
}
.post-card .bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  padding: 0 2px;
}
.post-card .id {
  font-size: 0.75em;
  color:#fc4;
}
.post-card .url {
  font-size: 0.75em;
  color:#888;
}
.post-card .beg {
  font-size: 0.75em;
  color:#c44;
}
.post-card .end {
  font-size: 0.75em;
  color:#4a4;
}
.post-card .title-wrapper {
  flex: 1;
  display: flex;
  align-items: center;      /* vertically center if short */
  justify-content: center;
  text-align: center;
  padding: 0 6px;
}
.post-card .title {
  font-weight: 600;
  font-size: 0.85em;
  line-height: 1.1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;    /* up to 5 lines */
  overflow: hidden;
  word-break: break-word;
}
</style>

<a class="post-card" href="/butiran/{{ .Get "url" }}/">
  <div class="top-row">
    <div class="id">{{ .Get "id" }}</div>
    <div class="url">{{ .Get "url" }}</div>
  </div>
  <div class="title-wrapper">
    <div class="title">{{ .Get "title" }}</div>
  </div>
  <div class="bottom-row">
    <div class="beg">{{ .Get "beg" }}</div>
    <div class="end">{{ .Get "end" }}</div>
  </div>
</a>