\n  :root {\n    --header-offset: 120px; \n    --primary-bg: #1a1a1a;\n    --secondary-bg: #2a2a2a;\n    --text-light: #ffffff;\n    --text-muted: #cccccc;\n    --accent-color: #FFD700; \n    --border-color: #3a3a3a;\n  }\n\n  .blog-list {\n    background-color: var(--primary-bg);\n    color: var(--text-light);\n    font-family: Arial, sans-serif;\n    line-height: 1.6;\n  }\n\n  .blog-list__section {\n    max-width: 1200px;\n    margin: 0 auto;\n    padding: var(--header-offset, 120px) 20px 40px; \n  }\n\n  .blog-list__main-title {\n    font-size: 2.5em;\n    color: var(--accent-color);\n    text-align: center;\n    margin-bottom: 20px;\n    font-weight: bold;\n    line-height: 1.2;\n  }\n\n  .blog-list__description {\n    font-size: 1.1em;\n    color: var(--text-muted);\n    text-align: center;\n    margin-bottom: 40px;\n    max-width: 800px;\n    margin-left: auto;\n    margin-right: auto;\n  }\n\n  .blog-list__grid {\n    display: grid;\n    gap: 30px; \n    padding-bottom: 40px;\n  }\n\n  .blog-list__item {\n    background-color: var(--secondary-bg);\n    border-radius: 10px; \n    overflow: hidden;\n    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);\n    transition: transform 0.3s ease, box-shadow 0.3s ease;\n    position: relative;\n  }\n\n  .blog-list__item:hover {\n    transform: translateY(-5px);\n    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);\n  }\n\n  .blog-list__link-wrapper {\n    display: block;\n    text-decoration: none;\n    color: inherit;\n    height: 100%; \n  }\n\n  .blog-list__image-container {\n    width: 100%;\n    padding-top: 56.25%; \n    background-size: cover;\n    background-position: center;\n    background-repeat: no-repeat;\n    border-bottom: 1px solid var(--border-color);\n  }\n\n  .blog-list__content-wrapper {\n    padding: 20px;\n    display: flex;\n    flex-direction: column;\n    height: calc(100% - 56.25%); \n  }\n\n  .blog-list__date {\n    display: block;\n    font-size: 0.85em;\n    color: var(--accent-color);\n    margin-bottom: 10px;\n    font-weight: bold;\n  }\n\n  .blog-list__title {\n    font-size: 1.25em;\n    color: var(--text-light);\n    margin-bottom: 10px;\n    font-weight: bold;\n    line-height: 1.3;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .blog-list__title:hover {\n    color: var(--accent-color);\n  }\n\n  .blog-list__summary {\n    font-size: 0.9em;\n    color: var(--text-muted);\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    flex-grow: 1; \n  }\n\n  .blog-list__read-more {\n    display: inline-block;\n    color: var(--accent-color);\n    font-weight: bold;\n    text-decoration: none;\n    transition: color 0.3s ease;\n    margin-top: auto; \n  }\n\n  .blog-list__read-more:hover {\n    color: var(--text-light);\n  }\n\n  @media (max-width: 767px) {\n    .blog-list__section {\n      padding-left: 15px;\n      padding-right: 15px;\n    }\n\n    .blog-list__main-title {\n      font-size: 2em;\n    }\n\n    .blog-list__description {\n      font-size: 1em;\n    }\n\n    .blog-list__grid {\n      grid-template-columns: 1fr; \n      gap: 20px;\n    }\n\n    .blog-list__item {\n      border-left: 3px solid var(--accent-color);\n      padding-left: 20px;\n      border-radius: 0 10px 10px 0;\n    }\n\n    .blog-list__item::before {\n      content: '';\n      position: absolute;\n      left: -8px;\n      top: 25px;\n      width: 12px;\n      height: 12px;\n      background-color: var(--accent-color);\n      border-radius: 50%;\n      z-index: 1;\n      border: 2px solid var(--primary-bg);\n    }\n  }\n\n  @media (min-width: 768px) and (max-width: 1023px) {\n    .blog-list__grid {\n      grid-template-columns: repeat(2, 1fr); \n    }\n    .blog-list__item {\n      border-left: none;\n      padding-left: 0;\n      border-radius: 10px;\n    }\n    .blog-list__item::before {\n      content: none;\n    }\n  }\n\n  @media (min-width: 1024px) {\n    .blog-list__grid {\n      grid-template-columns: repeat(3, 1fr); \n    }\n    .blog-list__item {\n      border-left: none;\n      padding-left: 0;\n      border-radius: 10px;\n    }\n    .blog-list__item::before {\n      content: none;\n    }\n  }\n