/* For the timeline and one-pager index where content is shrunk down into little cards */
@layer components {
  .mini-card {
    --panel-padding: 2.5ch;
    container-type: inline-size;
  }

  /* Place all the content tweaks within */
  .mini-card__content {
    margin-block-end: 0;
    max-block-size: 30em;
    overflow: hidden;
    padding: var(--panel-padding);
    padding-block-end: 0;

    .panel & {
      margin: calc(var(--panel-padding) * -1);
    }

    .page-header {
      padding-inline-end: 0.5em;
      padding-block-start: 0.5em;
    }

    .page-header__badge {
      font-size: 0.75em;
    }

    .trix-content {
      margin-block-start: 1ch;
    }

    .attachment__caption {
      font-size: var(--txt-small) !important;
    }

    .one-pager-block {
      --figure-size: 3em;
      --padding: 1.5ch;

      pointer-events: none;

      h3 {
        font-weight: 700;
      }
    }

    .one-pager-block__content--card {
      padding: 1ch;
    }

    .one-pager-block__description {
      font-size: var(--txt-small);
      margin-block-start: 0;
    }

    .minical__month {
      font-size: var(--txt-x-small);
      font-weight: 500;
    }

    .minical__day {
      font-size: var(--txt-medium);
      font-weight: bold;
    }

    .one-pager-block__file-no-preview {
      font-size: var(--txt-x-small);
    }

    .one-pager-block__faq-question {
      padding: 0.75ch 0.75em;
    }
  }

  .mini-card__footer {
    color: var(--color-text-subtle);
    font-family: var(--font-mono);
    font-size: 0.9em;
    margin-block-end: calc(var(--panel-padding) * -1) !important;
    padding: 3ch 0 2ch 0;
  }
}