.card--block-small {
  border-bottom: var(--border-light);
  padding: var(--padding-inner) 0;
  padding-bottom: calc(var(--spacing) * 0.75);

  &:first-of-type {
    border-top: var(--border-light);
  }

  @include grid-content();
  @include hover-card-line();

  .group-top {
    position: relative;
    // top: -5px;
  }

  @include btn--go-to();

  .btn--go-to {
    top: calc(var(--padding-inner) * 1);
    bottom: auto;
  }

  .title {
    grid-column: 2;
    grid-row: 2;
    font-size: var(--fs-normal);
    line-height: var(--leading-title);
    font-weight: 500;
    text-transform: uppercase;
    margin-right: 4ch;
  }

  .date {
    font-size: var(--fs-small);
    grid-column: 2;
    grid-row: 1;
    margin-top: 4px;
  }

  @media #{$small} {
    display: block;
    padding-bottom: calc(var(--spacing) * 0.5);

    .btn--go-to {
      top: auto;
      bottom: calc(var(--padding-inner) * 1);
    }

    .group-top {
      top: 0px;
      margin-bottom: calc(var(--spacing) * 0.5);
    }

    .title {
      margin-bottom: calc(var(--spacing) * 0.75);
      margin-right: 1ch;
    }

    .date {
      margin-top: 0px;
    }
  }
}

.card--block-small {
  .card--open-graph {
    grid-column: 2;
    z-index: 10;
  }

  .card--open-graph:not(:last-child) {
    margin-bottom: 1rem;
  }

  .open-graph__details {
    grid-column: 2;

    summary,
    .summary-inner {
      display: flex;
      align-items: center;
      cursor: pointer;
      gap: 0.5ch;
    }

    .arrow-details {
      line-height: 0;
      --size: 11px;
      height: var(--size);
      width: var(--size);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      position: relative;
      top: -2px;

      svg {
        transition: transform 0.2s ease-in;
        width: 100%;
        fill: var(--color-txt);
      }
    }

    summary:hover {
      color: var(--color-txt);

      .arrow-details svg {
        fill: var(--color-txt);
      }
    }

    &[open] {
      .arrow-details svg {
        transform: rotate(90deg);
      }
    }

    summary {
      color: var(--color-txt-light);

      .arrow-details svg {
        fill: var(--color-txt-light);
      }
    }

    @media #{$x-small} {
      summary {
        @include grid-content();
        grid-row-gap: 0;

        .summary-inner {
          grid-column: 2;
        }
      }

      grid-column: 1/3;
    }
  }
}