\n  .blog-list {\n    background-color: #1a1a1a;\n    color: #f0f0f0;\n    min-height: 100vh;\n    padding-top: var(--header-offset, 120px);\n    padding-bottom: 40px;\n  }\n\n  .blog-list__section {\n    max-width: 1200px;\n    margin: 0 auto;\n    padding: 20px;\n  }\n\n  .blog-list__heading {\n    font-size: 2.5em;\n    color: #ffcc00;\n    text-align: center;\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    text-align: center;\n    margin-bottom: 40px;\n    max-width: 800px;\n    margin-left: auto;\n    margin-right: auto;\n    line-height: 1.6;\n  }\n\n  .blog-list__grid {\n    display: grid;\n    gap: 30px;\n    grid-template-columns: 1fr;\n  }\n\n  @media (min-width: 768px) {\n    .blog-list__grid {\n      grid-template-columns: repeat(2, 1fr);\n    }\n  }\n\n  @media (min-width: 1024px) {\n    .blog-list__grid {\n      grid-template-columns: repeat(3, 1fr);\n    }\n  }\n\n  .blog-list__item {\n    background-color: #2a2a2a;\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    display: flex;\n    flex-direction: column;\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__image-wrapper {\n    width: 100%;\n    aspect-ratio: 16 / 9;\n    overflow: hidden;\n  }\n\n  .blog-list__image {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    display: block;\n  }\n\n  .blog-list__content {\n    padding: 20px;\n    display: flex;\n    flex-direction: column;\n    flex-grow: 1;\n  }\n\n  .blog-list__date {\n    font-size: 0.85em;\n    color: #999999;\n    margin-bottom: 10px;\n    display: block;\n  }\n\n  .blog-list__title {\n    font-size: 1.25em;\n    font-weight: bold;\n    margin-bottom: 10px;\n    line-height: 1.4;\n  }\n\n  .blog-list__link-title {\n    color: #f0f0f0;\n    text-decoration: none;\n    transition: color 0.3s ease;\n  }\n\n  .blog-list__link-title:hover {\n    color: #ffcc00;\n  }\n\n  .blog-list__summary {\n    font-size: 0.95em;\n    color: #cccccc;\n    margin-bottom: 15px;\n    line-height: 1.6;\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: #ffcc00;\n    text-decoration: none;\n    font-weight: bold;\n    transition: color 0.3s ease;\n    margin-top: auto;\n  }\n\n  .blog-list__read-more:hover {\n    color: #ffffff;\n  }\n