﻿@keyframes shine-skeleton-lines {
    0 {
        background-position: -100px
    }

    40%,100% {
        background-position: 600px
    }
}

.mod__max-w-xl {
    max-width: 1436px;
    margin: auto
}

.cmp-specs-highlights {
    padding: 20px 0 30px
}

.cmp-specs-highlights__wrapper {
    position: relative;
    margin: 0 auto;
    width: 100%;
    max-width: 1184px;
    padding: 0 16px;
    gap: 24px
}

.cmp-specs-highlights__title .cmp-title__text {
    color: var(--title-color);
    font-family: var(--title-font);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 24px;
    line-height: 1.5;
    margin: 0;
    word-break: break-word
}

.cmp-specs-highlights__text .cmp-text, .cmp-specs-highlights__text .cmp-text p {
    color: var(--text-color);
    font-family: var(--text-font);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5
}

    .cmp-specs-highlights__text .cmp-text a {
        color: var(--text-color);
        text-decoration: underline
    }

    .cmp-specs-highlights__text .cmp-text h1, .cmp-specs-highlights__text .cmp-text h2, .cmp-specs-highlights__text .cmp-text h3, .cmp-specs-highlights__text .cmp-text h4, .cmp-specs-highlights__text .cmp-text h5, .cmp-specs-highlights__text .cmp-text h6, .cmp-specs-highlights__text .cmp-text blockquote, .cmp-specs-highlights__text .cmp-text pre {
        color: var(--text-color);
        font-family: var(--text-font);
        font-weight: 400;
        font-size: 16px;
        line-height: 1.5;
        margin: 0
    }

.cmp-specs-highlights__grid {
    margin-top: 20px;
    row-gap: 45px;
    column-gap: 16px
}

@media(min-width:764px) {
    .cmp-specs-highlights {
        padding: 30px 0 50px
    }

    .cmp-specs-highlights__wrapper {
        padding: 0 32px
    }

    .cmp-specs-highlights__text {
        max-width: 600px
    }

        .cmp-specs-highlights__text .cmp-text, .cmp-specs-highlights__text .cmp-text p {
            font-size: 20px;
            line-height: 1.5
        }

            .cmp-specs-highlights__text .cmp-text a {
                text-decoration: underline
            }

    .cmp-specs-highlights__grid {
        margin-top: 30px;
        row-gap: 28px;
        column-gap: 35px
    }
}

@media(min-width:1016px) {
    .cmp-specs-highlights {
        padding: 50px 0
    }

    .cmp-specs-highlights__grid {
        column-gap: 55px
    }
}

@media(min-width:1436px) {
    .cmp-specs-highlights__text {
        max-width: 1024px
    }

    .cmp-specs-highlights__grid {
        margin-top: 62px;
        row-gap: 32px;
        column-gap: 95px
    }
}

.cmp-specs-highlights-item__icon .ico {
    mask: var(--ico-path) no-repeat 100% 100%;
    -webkit-mask: var(--ico-path) no-repeat 100% 100%;
    -webkit-mask-size: contain;
    mask-size: contain
}

.cmp-specs-highlights-item__highlight .cmp-text p {
    color: var(--highlight-color);
    font-family: var(--highlight-font);
    font-weight: 400;
    text-transform: unset;
    font-size: 14px;
    line-height: 1.25
}

    .cmp-specs-highlights-item__highlight .cmp-text p > a {
        color: var(--highlight-color);
        text-decoration: underline
    }

@media(min-width:764px) {
    .cmp-specs-highlights-item__highlight .cmp-text p {
        font-size: 16px;
        line-height: 1.5
    }

        .cmp-specs-highlights-item__highlight .cmp-text p > a {
            text-decoration: underline
        }
}

.cmp-specs-highlights {
    --bg-color: var(--color-bg-01);
    --title-font: "SeatBold",sans-serif;
    --title-color: var(--color-font-01);
    --text-font: "SeatRegular",sans-serif;
    --text-color: var(--color-font-01);
    --highlight-font: "SeatRegular",sans-serif;
    --highlight-color: var(--color-font-01);
    --bg-color-ico: var(--color-bg-02)
}

    .cmp-specs-highlights.mod__dark {
        --title-color: var(--color-font-06);
        --text-color: var(--color-font-06);
        --highlight-color: var(--color-font-06);
        --bg-color-ico: var(--color-bg-01);
        --bg-color: var(--bg-color);
        --font-color: var(--title-color);
        --font-color: var(--text-color);
        --bg-color: var(--color-bg-02);
        --font-color: var(--highlight-color)
    }

        .cmp-specs-highlights.mod__dark .ico {
            --bg-color: var(--bg-color-ico);
            --font-color: var(--color-font-03)
        }
