/* 1. Зменшуємо основні відступи контентної області */
#sp-main-body {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

/* 2. Прибираємо відступ зверху у заголовка статті */
.article-details .article-header {
    margin-top: 0px !important;
    margin-bottom: 10px !important; /* Додаємо невеликий відступ знизу для чіткості */
}

/* 3. Helix3 часто додає відступ самому компоненту, прибираємо його */
#sp-component {
    margin-top: 0px !important;
    padding-top: 0px !important;
}

/* 4. Якщо ви використовуєте макет Блогу, прибираємо відступи між матеріалами */
.blog .items-leading, .blog .items-row {
    margin-top: 0px !important;
    margin-bottom: 5px !important;
}
/* Базові налаштування списку */
.items-more ol {
    list-style: none !important;
    padding: 0 !important;
    margin: 20px 0 !important;
}

/* Кожен пункт списку */
.items-more ol li {
    position: relative;
    padding-left: 30px !important; /* Місце для іконки */
    border-bottom: 1px solid #f0f0f0;
    transition: all 0.3s ease;
}

/* Створення іконки через псевдоелемент :before */
.items-more ol li:before {
    content: "→"; /* Можна замінити на "♦", "◈" або "➤" */
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
    color: #b32d2e; /* Колір іконки */
    font-size: 18px;
    font-weight: bold;
}

/* Стиль посилання */
.items-more ol li a {
    display: block;
    padding: 12px 0;
    color: #444;
    text-decoration: none;
    font-size: 16px;
}

/* Ефект при наведенні */
.items-more ol li:hover {
    background-color: #fcfcfc;
}

.items-more ol li:hover a {
    color: #000;
    padding-left: 5px; /* Ефект легкого руху тексту */
}