:root {
      --bg: #e9e9e9;
      --text: #1f1f1f;
      --card-border: #1f1f1f;
      --container-width: 1440px;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      min-width: 320px;
      background: var(--bg);
      color: var(--text);
      font-family: 'PT Sans', sans-serif;
    }

    img {
      display: block;
      max-width: 100%;
      height: auto;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    .page {
      width: 100%;
      overflow-x: hidden;
      padding: 20px 16px 28px;
    }

    .articles {
      max-width: var(--container-width);
      margin: 0 auto;
    }

    .articles__list {
      display: flex;
      flex-direction: column;
      gap: 22px;
    }

    .article-card {
      display: grid;
      grid-template-columns: clamp(320px, 42vw, 580px) minmax(0, 1fr);
      gap: clamp(16px, 2vw, 28px);
      align-items: stretch;
      background: transparent;
      border: 2px solid var(--card-border);
      border-radius: 12px;
      padding: 10px 12px;
      transition: transform 0.18s ease, box-shadow 0.18s ease;
    }

    .article-card:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    }

    .article-card__image-wrap {
      width: 100%;
      min-width: 0;
    }

    .article-card__image {
      width: 100%;
      height: clamp(210px, 22vw, 307px);
      object-fit: cover;
      border-radius: 10px;
    }

    .article-card__content {
      min-width: 0;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      padding-top: 2px;
      padding-right: 8px;
    }

    .article-card__title {
      margin: 0 0 16px;
      font-size: 28px;
      line-height: 1.18;
      font-weight: 700;
    }

    .article-card__excerpt {
      margin: 0;
      font-size: 22px;
      line-height: 1.32;
      display: -webkit-box;
      -webkit-line-clamp: 6;
      line-clamp: 6;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    @media (max-width: 1100px) {


      .article-card__title {
        font-size: 24px;
      }

      .article-card__excerpt {
        font-size: 20px;
      }
    }

    @media (max-width: 900px) {


      .article-card__title {
        font-size: 22px;
        margin-bottom: 12px;
      }

      .article-card__excerpt {
        font-size: 18px;
        line-height: 1.3;
        -webkit-line-clamp: 5;
        line-clamp: 5;
      }
    }

    @media (min-width: 701px) and (max-width: 800px) {
      .article-card__title {
        font-size: 20px;
        line-height: 1.18;
        margin-bottom: 10px;
      }
      .article-card__excerpt {
        font-size: 17px;
        line-height: 1.2;
        -webkit-line-clamp: 6;
        line-clamp: 6;
      }
    }

    @media (max-width: 700px) {
      .page {
        padding: 18px 18px 24px;
      }

      .articles__list {
        gap: 14px;
      }

      .article-card {
        display: block;
        padding: 8px;
        border-radius: 10px;
      }

      .article-card__image {
        width: 100%;
        height: auto;
        aspect-ratio: 483 / 252;
        object-fit: cover;
        border-radius: 8px;
      }

      .article-card__content {
        padding: 10px 0 2px;
      }

      .article-card__title {
        margin: 0 0 10px;
        font-size: 21px;
        line-height: 1.2;
      }

      .article-card__excerpt {
        font-size: 18px;
        line-height: 1.3;
        -webkit-line-clamp: 5;
        line-clamp: 5;
      }
    }

    @media (max-width: 420px) {
      .page {
        padding-left: 18px;
        padding-right: 18px;
      }

      .article-card__title {
        font-size: 19px;
      }

      .article-card__excerpt {
        font-size: 17px;
        line-height: 1.28;
        -webkit-line-clamp: 5;
        line-clamp: 5;
      }
    }