\n    :root {\n      --primary-color: #e44d26; \n      --secondary-color: #333;\n      --text-color-dark: #1a1a1a;\n      --text-color-medium: #666;\n      --text-color-light: #999;\n      --background-light: #f9f9f9;\n      --border-color: #eee;\n      --card-shadow: rgba(0, 0, 0, 0.08);\n      --card-shadow-hover: rgba(0, 0, 0, 0.15);\n      --header-offset: 120px; \n    }\n\n    .blog-list__container {\n      max-width: 1200px;\n      margin: 0 auto;\n      padding: 20px;\n      padding-top: var(--header-offset, 120px); \n      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n      color: var(--text-color-dark);\n      line-height: 1.6;\n    }\n\n    .blog-list__title {\n      text-align: center;\n      font-size: 2.2em;\n      margin-bottom: 40px;\n      color: var(--text-color-dark);\n      font-weight: bold;\n      position: relative;\n      padding-bottom: 10px;\n      text-transform: uppercase;\n    }\n\n    .blog-list__title::after {\n      content: '';\n      position: absolute;\n      left: 50%;\n      bottom: 0;\n      transform: translateX(-50%);\n      width: 60px;\n      height: 4px;\n      background-color: var(--primary-color);\n      border-radius: 2px;\n    }\n\n    .blog-list__timeline {\n      position: relative;\n      padding: 20px 0;\n    }\n\n    .blog-list__timeline::before {\n      content: '';\n      position: absolute;\n      top: 0;\n      left: 50%;\n      transform: translateX(-50%);\n      width: 2px;\n      height: 100%;\n      background-color: var(--border-color);\n      z-index: 0;\n    }\n\n    .blog-list__timeline-item {\n      display: flex;\n      justify-content: center;\n      align-items: flex-start;\n      margin-bottom: 40px;\n      position: relative;\n      z-index: 1;\n    }\n\n    .blog-list__timeline-item:nth-child(even) {\n      flex-direction: row-reverse;\n    }\n\n    .blog-list__timeline-item:last-child {\n      margin-bottom: 0;\n    }\n\n    .blog-list__timeline-dot {\n      position: absolute;\n      top: 0;\n      left: 50%;\n      transform: translateX(-50%);\n      width: 18px;\n      height: 18px;\n      background-color: var(--primary-color);\n      border: 3px solid var(--background-light);\n      border-radius: 50%;\n      z-index: 2;\n    }\n\n    .blog-list__card {\n      background-color: #fff;\n      border-radius: 10px;\n      box-shadow: 0 4px 15px var(--card-shadow);\n      transition: transform 0.3s ease, box-shadow 0.3s ease;\n      overflow: hidden;\n      width: calc(50% - 40px); \n      margin: 0 20px;\n      display: flex;\n      flex-direction: column;\n      height: 100%; \n    }\n\n    .blog-list__timeline-item:nth-child(even) .blog-list__card {\n      margin-left: 40px; \n      margin-right: 0;\n    }\n\n    .blog-list__timeline-item:nth-child(odd) .blog-list__card {\n      margin-right: 40px; \n      margin-left: 0;\n    }\n\n    .blog-list__card:hover {\n      transform: translateY(-5px);\n      box-shadow: 0 8px 25px var(--card-shadow-hover);\n    }\n\n    .blog-list__card-image-wrapper {\n      width: 100%;\n      padding-bottom: 56.25%; \n      position: relative;\n      overflow: hidden;\n    }\n\n    .blog-list__card-image {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n      display: block;\n    }\n\n    .blog-list__card-content {\n      padding: 20px;\n      flex-grow: 1; \n      display: flex;\n      flex-direction: column;\n    }\n\n    .blog-list__card-published-at {\n      display: block;\n      font-size: 14px;\n      color: var(--text-color-light);\n      margin-bottom: 10px;\n      text-transform: uppercase;\n    }\n\n    .blog-list__card-title {\n      font-size: 20px;\n      font-weight: bold;\n      margin-top: 0;\n      margin-bottom: 15px;\n      line-height: 1.4;\n    }\n\n    .blog-list__card-title a {\n      color: var(--text-color-dark);\n      text-decoration: none;\n      transition: color 0.3s ease;\n    }\n\n    .blog-list__card-title a:hover {\n      color: var(--primary-color);\n    }\n\n    .blog-list__card-summary {\n      font-size: 15px;\n      color: var(--text-color-medium);\n      line-height: 1.6;\n      margin-bottom: 20px;\n      display: -webkit-box;\n      -webkit-line-clamp: 3;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      flex-grow: 1; \n    }\n\n    .blog-list__card-read-more {\n      display: inline-block;\n      background-color: var(--primary-color);\n      color: #fff;\n      padding: 10px 20px;\n      border-radius: 5px;\n      text-decoration: none;\n      font-size: 14px;\n      font-weight: bold;\n      text-align: center;\n      transition: background-color 0.3s ease;\n      align-self: flex-start; \n    }\n\n    .blog-list__card-read-more:hover {\n      background-color: #c73c1c; \n    }\n\n    \n    @media (max-width: 1024px) {\n      .blog-list__timeline::before {\n        left: 20px; \n        transform: translateX(0);\n      }\n\n      .blog-list__timeline-dot {\n        left: 20px;\n        transform: translateX(0);\n      }\n\n      .blog-list__timeline-item {\n        flex-direction: row !important; \n        justify-content: flex-start;\n      }\n\n      .blog-list__card {\n        width: calc(100% - 70px); \n        margin: 0 0 0 50px !important; \n      }\n      \n      .blog-list__timeline-item:nth-child(even) .blog-list__card {\n        margin-left: 50px !important;\n      }\n    }\n\n    @media (max-width: 768px) {\n      .blog-list__container {\n        padding: 15px;\n        padding-top: var(--header-offset, 120px);\n      }\n\n      .blog-list__title {\n        font-size: 1.8em;\n        margin-bottom: 30px;\n      }\n\n      .blog-list__timeline {\n        padding: 10px 0;\n      }\n      \n      .blog-list__timeline::before {\n        left: 15px;\n      }\n\n      .blog-list__timeline-dot {\n        left: 15px;\n        width: 16px;\n        height: 16px;\n      }\n\n      .blog-list__card {\n        width: calc(100% - 60px); \n        margin: 0 0 0 40px !important;\n        border-radius: 8px;\n      }\n\n      .blog-list__card-content {\n        padding: 15px;\n      }\n\n      .blog-list__card-title {\n        font-size: 18px;\n        margin-bottom: 10px;\n      }\n\n      .blog-list__card-summary {\n        font-size: 14px;\n        -webkit-line-clamp: 4; \n        margin-bottom: 15px;\n      }\n\n      .blog-list__card-published-at {\n        font-size: 12px;\n      }\n\n      .blog-list__card-read-more {\n        padding: 8px 15px;\n        font-size: 13px;\n      }\n    }\n\n    @media (max-width: 480px) {\n      .blog-list__container {\n        padding: 10px;\n        padding-top: var(--header-offset, 120px);\n      }\n\n      .blog-list__title {\n        font-size: 1.5em;\n        margin-bottom: 25px;\n      }\n\n      .blog-list__timeline::before {\n        left: 10px;\n      }\n\n      .blog-list__timeline-dot {\n        left: 10px;\n        width: 14px;\n        height: 14px;\n      }\n\n      .blog-list__card {\n        width: calc(100% - 50px);\n        margin: 0 0 0 30px !important;\n      }\n    }\n