:root {
    --tag-primary: #161819;
    --tag-on-primary: #fff;
    --section-tag-text-body-1-font-size: var(--text-body-1-font-size);
    --tag-card-background: #f8eccd;
    --tag-card-content: #161819;

    --tag-text-grey-color: #9c9e9f;
    --tag-primary-color-hover: #70530B;

    @media (max-width: 639px) {
        --section-tag-text-body-1-font-size: var(--text-body-2-font-size);
    }

    .light {
        --tag-primary: #fffaec;
        --tag-on-primary: #161819;
    }
}

.tags-section__tag {
    background: var(--primary-background-gradient);
    color: var(--tag-card-content);
    border-radius: 40px;
    line-height: 16px;
    white-space: nowrap;
    text-align: center;
    padding: 7px;
    min-width: 110px;
    font-size: var(--text-body-1-font-size);
}
@media screen and (max-width: 375px) {    
    .tags-section__tag  {
        padding: 3px;
        min-width: 70px;
        width: fit-content;
    }
}
.tag-section__text-body {
    font-size: var(--section-tag-text-body-1-font-size);
    font-family: var(--secondary-font-family-sans-serif);
    font-weight: var(--text-body-1-font-weight);
    line-height: var(--text-body-1-line-height);
}

.tags-section {
    background-color: var(--tag-primary);
    color: var(--tag-on-primary);

    .pagination-news {
        display: flex;
        gap: 9px;
        justify-content: center;

        li.dots {
            display: none;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            color: var(--tag-text-grey-color);
        }

        .sm-hidden {
            display: inline !important;
        }

        @media (max-width: 640px) {
            .page-number {
                display: none;
            }

            li.dots {
                display: flex;
            }
        }

        button {
            width: 40px;
            height: 40px;
            border-radius: 100%;
            color: var(--tag-on-primary);
            border: 0.5px solid var(--tag-on-primary);

            &.prev,
            &.next {
                border-radius: 100px;
                width: auto;
                background-color: transparent;
                padding: 12px;
                @media screen and (max-width: 425px) {
                    padding: 8px;
                }
            }

            &:hover {
                background: var(--primary-background-gradient);
            }

            &.active,
            &:active {
                background: var(--primary-background-gradient);
                stroke-width: 1px;
                stroke: var(--tag-primary-color-hover);
            }
        }
    }
}

.tags-section__h2 {
    font-size: var(--heading-2-font-size);
    line-height: var(--heading-2-line-height);
    font-weight: var(--heading-2-font-weight);
    font-family: var(--primary-font-family-sans-serif);
}
.tags-cms__s3 {
    font-size: var(--subtitle-3-font-size);
    line-height: var(--subtitle-3-line-height);
    font-weight: var(--subtitle-3-font-weight);
}
.card__time {
    font-size: var(--text-body-1-font-size);
    @media (max-width: 640px) {
        font-size: var(--text-body-3-font-size);
    }
}