.article-list-header {
  .content-wrap {
    padding-top: 88px;
    @media (min-width: 724px) {
      padding-top: 120px;
    }

    h1 {
      font-size: 32px;
      font-weight: 600;
      line-height: normal;
      margin: 0;
      color: var(--text-primary);
      @media (min-width: 724px) {
        font-size: 64px;
      }
    }

    p {
      margin: 16px 0 0;
      font-size: 16px;
      font-weight: 400;
      line-height: 1.3;
      letter-spacing: -0.48px;
      color: var(--text-secondary);
      @media (min-width: 724px) {
        margin-top: 24px;
        font-size: 24px;
      }
    }

    .category {
      position: relative;
      margin: 82px auto 0;
      max-width: 500px;
      @media (min-width: 724px) {
        margin-top: 91px;
      }
      @media (min-width: 1086px) {
        max-width: none;
      }

      button {
        padding: 0 16px;
        height: 42px;
        border-radius: 4px;
        border: 1px solid #E7E7EE;
        background: #fff;
        font-size: 16px;
        color: #000;
        width: 100%;
        text-align: left;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="10" viewBox="0 0 14 10" fill="none"><path d="M0.308163 1.27884C0.505539 1.08152 0.773202 0.970673 1.05229 0.970673C1.33138 0.970673 1.59904 1.08152 1.79642 1.27884L7.00638 6.48879L12.2163 1.27884C12.4148 1.08711 12.6807 0.981023 12.9567 0.983421C13.2326 0.985819 13.4966 1.09651 13.6918 1.29166C13.8869 1.4868 13.9976 1.75079 14 2.02675C14.0024 2.30272 13.8963 2.56859 13.7046 2.76709L7.75051 8.72118C7.55313 8.9185 7.28547 9.02934 7.00638 9.02934C6.72729 9.02934 6.45962 8.9185 6.26225 8.72118L0.308163 2.76709C0.110846 2.56972 0 2.30205 0 2.02296C0 1.74387 0.110846 1.47621 0.308163 1.27884Z" fill="%232B2B3B"/></svg>') no-repeat right 32px center / 14px 10px;
        @media (min-width: 1086px) {
          display: none;
        }
      }

      ul {
        display: none;
        position: absolute;
        z-index: 1;
        top: 41px;
        margin: 0 auto;
        padding: 8px 0;
        list-style: none;
        width: 100%;
        background: #fff;
        border: 1px solid #E7E7EE;
        border-radius: 4px;
        font-size: 16px;
        .open & {
          display: block;
        }
        @media (min-width: 1086px) {
          display: flex;
          position: static;
          width: fit-content;
          padding: 3px 7px;
          border-radius: 29px;
          border: 1px solid #E7E7EE;
          background: #EFEFF5;
          gap: 8px;
          align-items: center;
          overflow: auto;
        }

        li {
          flex-shrink: 0;
        }

        a {
          display: block;
          padding: 4px 16px;
          color: var(--text-primary);
          text-decoration: none;
          &:hover {
            background: #F0F0F4;
          }
          @media (min-width: 1086px) {
            display: inline-block;
            padding: 4px 30px;
            border-radius: 12px;
            font-weight: 500;
            line-height: 1.3;
            color: var(--text-secondary);

            &.on {
              background-color: #fff;
            }
          }
        }
      }
    }
  }
}

.featured,
.recent-posts {
  margin: 32px 0 0;
}

.recent-posts {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 64px 24px;
  }
}

.post-item {
  border-radius: 24px;
  border: 1px solid #E7E7EE;
  overflow: hidden;
  .featured & {
    @media (min-width: 724px) {
      border: none;      
    }
  }

  a {
    display: block;
    color: var(--text-primary);
    text-decoration: none;
    .featured & {
      @media (min-width: 724px) {
        position: relative;
        padding: 0 0 0 55%;
        aspect-ratio: 1400 / 420;
      }
    }
      
    .image {
      margin: 0;
      width: 100%;
      aspect-ratio: 500 / 280;
      .featured & {
        @media (min-width: 724px) {
          position: absolute;
          top: 0;
          left: 0;
          right: 45%;
          bottom: 0;
          margin: 0;
          width: auto;
          height: auto;
          border-radius: 24px;
          overflow: hidden;
          aspect-ratio: auto;
        }
      }

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        vertical-align: middle;
      }
    }

    .category {
      margin: 0;
      padding: 24px 24px 0;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      .featured & {
        @media (min-width: 1226px) {
          padding: 40px 40px 0;
        }
      }

      span {
        border-radius: 4px;
        background: #F0F0F4;
        padding: 4px 8px;
        flex-shrink: 0;
        font-size: 14px;
      }
    }

    h3 {
      margin: 24px 24px 8px;
      font-size: 20px;
      font-weight: 500;
      line-height: normal;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      overflow: hidden;
      @media (min-width: 1086px) {
        margin-bottom: 16px;
      }
      .featured & {
        @media (min-width: 809px) {
          font-size: 24px;
        }
        @media (min-width: 1086px) {
          font-size: 28px;
        }
        @media (min-width: 1226px) {
          margin-left: 40px;
          margin-right: 40px;
          font-size: 32px;
          line-height: 1.3;
          -webkit-line-clamp: 3;
          line-clamp: 3;
        }
      }
    }

    .description {
      margin: 0 24px 40px;
      font-size: 16px;
      font-weight: 400;
      line-height: normal;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      overflow: hidden;
      .featured & {
        @media (min-width: 809px) {
          -webkit-line-clamp: 3;
          line-clamp: 3;
        }
        @media (min-width: 1226px) {
          margin: 8px 40px 0;
        }
      }
    }
 }
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 64px 0 120px;

  a,
  span {
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--text-primary);
    border-radius: 22px;

    &.current {
      background-color: #E3E2EB;
    }
    &.prev,
    &.next {
      background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="22" viewBox="0 0 12 22" fill="none"><path d="M10.5832 1.91667L1.4165 11.0833L10.5832 20.25" stroke="%232B2B3B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center center / 12px 22px;
      text-indent: -9em;
      overflow: hidden;
    }
    &.next {
      transform: rotate(180deg);
    }
  }
  span {
    &.prev,
    &.next {
      opacity: 0.3;
    }
  }
}