\n  .blog-list {\n    padding-top: var(--header-offset, 120px);\n    padding-bottom: 60px;\n    background-color: #1a1a1a; \n    color: #f0f0f0; \n    font-family: 'Arial', sans-serif;\n    line-height: 1.6;\n    max-width: 1200px;\n    margin: 0 auto;\n    padding-left: 15px;\n    padding-right: 15px;\n  }\n\n  .blog-list__hero {\n    text-align: center;\n    margin-bottom: 60px;\n    padding: 40px 20px;\n    background: linear-gradient(135deg, #2a2a2a, #1a1a1a);\n    border-radius: 12px;\n    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);\n  }\n\n  .blog-list__main-title {\n    font-size: 2.5em; \n    color: #ffcc00; \n    margin-bottom: 15px;\n    font-weight: bold;\n    line-height: 1.2;\n  }\n\n  .blog-list__description {\n    font-size: 1.1em; \n    color: #cccccc;\n    max-width: 800px;\n    margin: 0 auto;\n  }\n\n  .blog-list__timeline-container {\n    position: relative;\n    margin: 0 auto;\n    padding: 20px 0;\n  }\n\n  .blog-list__timeline-container::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 50%;\n    transform: translateX(-50%);\n    width: 4px;\n    background-color: #333; \n    height: 100%;\n    z-index: 1;\n  }\n\n  .blog-list__timeline-item {\n    position: relative;\n    margin-bottom: 60px; \n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 0 20px;\n    z-index: 2;\n  }\n\n  .blog-list__timeline-item::after {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    width: 20px;\n    height: 20px;\n    background-color: #ffcc00; \n    border-radius: 50%;\n    border: 4px solid #1a1a1a; \n    z-index: 3;\n    box-shadow: 0 0 0 2px #ffcc00; \n  }\n\n  .blog-list__timeline-date-wrapper {\n    flex: 0 0 25%; \n    text-align: right;\n    padding-right: 30px; \n    box-sizing: border-box;\n  }\n\n  .blog-list__timeline-date {\n    font-size: 1.1em; \n    color: #ffcc00; \n    font-weight: bold;\n    display: block;\n  }\n\n  .blog-list__timeline-content-wrapper {\n    flex: 0 0 70%; \n    background-color: #2a2a2a; \n    border-radius: 12px;\n    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);\n    padding: 20px;\n    display: flex;\n    align-items: flex-start;\n    transition: transform 0.3s ease, box-shadow 0.3s ease;\n    border: 1px solid #3a3a3a;\n  }\n\n  .blog-list__timeline-content-wrapper:hover {\n    transform: translateY(-5px);\n    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);\n  }\n\n  .blog-list__timeline-image-link {\n    flex: 0 0 30%; \n    margin-right: 20px;\n    display: block;\n    overflow: hidden;\n    border-radius: 8px;\n  }\n\n  .blog-list__timeline-image {\n    width: 100%;\n    padding-bottom: 56.25%; \n    background-size: cover;\n    background-position: center;\n    background-color: #333; \n    border-radius: 8px;\n  }\n\n  .blog-list__timeline-text-content {\n    flex: 1; \n  }\n\n  .blog-list__timeline-title {\n    font-size: 1.3em; \n    font-weight: bold;\n    margin-bottom: 10px;\n    line-height: 1.3;\n  }\n\n  .blog-list__timeline-title-link {\n    color: #f0f0f0;\n    text-decoration: none;\n    transition: color 0.3s ease;\n  }\n\n  .blog-list__timeline-title-link:hover {\n    color: #ffcc00;\n  }\n\n  .blog-list__timeline-summary {\n    font-size: 0.95em; \n    color: #cccccc;\n    margin-bottom: 15px;\n    display: -webkit-box;\n    -webkit-line-clamp: 3; \n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .blog-list__timeline-read-more {\n    display: inline-block;\n    background-color: #ffcc00;\n    color: #1a1a1a;\n    padding: 8px 15px;\n    border-radius: 5px;\n    text-decoration: none;\n    font-weight: bold;\n    transition: background-color 0.3s ease, color 0.3s ease;\n    font-size: 0.9em;\n  }\n\n  .blog-list__timeline-read-more:hover {\n    background-color: #e6b800;\n    color: #000;\n  }\n\n  \n  @media (min-width: 768px) {\n    .blog-list__timeline-item:nth-child(odd) .blog-list__timeline-date-wrapper {\n      order: 2; \n      text-align: left;\n      padding-left: 30px;\n      padding-right: 0;\n    }\n\n    .blog-list__timeline-item:nth-child(odd) .blog-list__timeline-content-wrapper {\n      order: 1; \n      margin-right: 30px; \n    }\n\n    .blog-list__timeline-item:nth-child(even) .blog-list__timeline-date-wrapper {\n      order: 1; \n    }\n\n    .blog-list__timeline-item:nth-child(even) .blog-list__timeline-content-wrapper {\n      order: 2; \n      margin-left: 30px; \n    }\n  }\n\n  \n  @media (max-width: 1024px) {\n    .blog-list__main-title {\n      font-size: 2em; \n    }\n    .blog-list__description {\n      font-size: 1em; \n    }\n    .blog-list__timeline-item {\n      padding: 0 10px;\n    }\n    .blog-list__timeline-date-wrapper {\n      flex: 0 0 30%;\n      padding-right: 20px;\n    }\n    .blog-list__timeline-content-wrapper {\n      flex: 0 0 65%;\n    }\n    .blog-list__timeline-image-link {\n      flex: 0 0 35%;\n    }\n  }\n\n  @media (max-width: 767px) {\n    .blog-list__timeline-container::before {\n      left: 20px; \n      transform: none;\n    }\n\n    .blog-list__timeline-item {\n      flex-direction: column; \n      align-items: flex-start;\n      padding: 0;\n      margin-bottom: 40px;\n    }\n\n    .blog-list__timeline-item::after {\n      left: 20px; \n      transform: translateX(-50%);\n      top: 0; \n    }\n\n    .blog-list__timeline-date-wrapper {\n      order: 1;\n      text-align: left;\n      padding-left: 50px; \n      padding-right: 0;\n      margin-bottom: 10px;\n    }\n\n    .blog-list__timeline-date {\n      font-size: 1em;\n    }\n\n    .blog-list__timeline-content-wrapper {\n      order: 2;\n      flex: 1;\n      width: calc(100% - 40px); \n      margin-left: 40px; \n      margin-right: 0;\n      flex-direction: column; \n    }\n\n    .blog-list__timeline-image-link {\n      width: 100%;\n      margin-right: 0;\n      margin-bottom: 15px;\n    }\n\n    .blog-list__timeline-title {\n      font-size: 1.2em; \n    }\n\n    .blog-list__timeline-summary {\n      font-size: 0.9em; \n    }\n  }\n\n  \n  .blog-list__pagination {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    margin-top: 60px;\n    gap: 10px;\n    font-size: 1.1em;\n  }\n\n  .blog-list__pagination-link,\n  .blog-list__pagination-current {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    min-width: 40px;\n    height: 40px;\n    border-radius: 8px;\n    text-decoration: none;\n    color: #f0f0f0;\n    background-color: #333;\n    transition: background-color 0.3s ease, color 0.3s ease;\n    font-weight: bold;\n  }\n\n  .blog-list__pagination-link:hover {\n    background-color: #ffcc00;\n    color: #1a1a1a;\n  }\n\n  .blog-list__pagination-current {\n    background-color: #ffcc00;\n    color: #1a1a1a;\n    cursor: default;\n  }\n\n  .blog-list__pagination-link--prev,\n  .blog-list__pagination-link--next {\n    padding: 0 15px;\n  }\n\n  @media (max-width: 480px) {\n    .blog-list__pagination-link,\n    .blog-list__pagination-current {\n      min-width: 35px;\n      height: 35px;\n      font-size: 0.9em;\n    }\n    .blog-list__pagination-link--prev,\n    .blog-list__pagination-link--next {\n      padding: 0 10px;\n    }\n  }\n