.archive {
  ul {
    display: grid;
    grid-column-gap: 16px;
    padding: 16px;

    @include pc-layout {
      grid-template-columns: 1fr 1fr;
    }
    @include sp-layout {
      grid-template-columns: 1fr;
    }

    li {
      list-style: none;
      margin: 0 auto 16px;
      width: 100%;
      border-top-width: 2px;
      border-top-style: solid;
      @include card-light;

      h3 {
        padding: $card-padding;
        font-size: $font-size-large;
        font-weight: $font-weight-normal;
        line-height: 1.8;
      }

      .post-meta {
        display: flex;
        padding: $card-padding;
        height: 50px;
        border-top: 1px solid $bg-dark;
        word-break: keep-all;
        @include sp-layout {
          max-width: 94vw;
          overflow: auto;
        }

        & > span {
          display: flex;
          align-items: center;
          margin-right: 12px;

          &:last-child {
            margin-right: 0;
          }

          span {
            padding-right: 6px;
            &:last-child {
              padding-right: 0;
            }
          }

          .icon {
            margin-right: 4px;
          }
          .icon-fire {
            margin-top: -2px;
          }
        }
      }
    }
  }

  .btn-group {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 12px;
  }
}
