﻿@keyframes shine-skeleton-lines {
    0 {
        background-position: -100px
    }

    40%,100% {
        background-position: 600px
    }
}

.mod__max-w-xl {
    max-width: 1436px;
    margin: auto
}

.cmp-specs-engine-data {
    padding-bottom: 38px
}

.cmp-specs-engine-data__wrapper {
    position: relative;
    margin: 0 auto;
    width: 100%;
    max-width: 1184px;
    padding: 0 16px;
    row-gap: 38px
}

.cmp-specs-engine-data__title {
    text-align: center;
    margin-bottom: 0
}

    .cmp-specs-engine-data__title .cmp-title__text {
        color: var(--title-color);
        font-family: var(--title-font);
        font-weight: 350;
        text-transform: unset;
        font-size: 16px;
        line-height: 1.2;
        margin: 0;
        word-break: break-word
    }

.cmp-specs-engine-data__info-title {
    margin-bottom: 16px
}

    .cmp-specs-engine-data__info-title .cmp-title__text {
        color: var(--color-font-01);
        font-family: var(--text-font);
        font-weight: 350;
        text-transform: capitalize;
        font-size: 14px;
        line-height: 1;
        margin: 0;
        word-break: break-word
    }

.cmp-specs-engine-data__info-items {
    display: grid;
    row-gap: 14px;
    column-gap: 3%;
    grid-template-columns: repeat(auto-fill,minmax(8rem,1fr))
}

@media(min-width:764px) {
    .cmp-specs-engine-data {
        padding-bottom: 32px
    }

    .cmp-specs-engine-data__wrapper {
        row-gap: 64px;
        padding: 0 32px
    }

    .cmp-specs-engine-data__title .cmp-title__text {
        font-size: 20px;
        line-height: 1.2;
        margin: 0;
        word-break: break-word
    }

    .cmp-specs-engine-data__info-title .cmp-title__text {
        font-size: 16px;
        line-height: 1.2;
        margin: 0;
        word-break: break-word
    }

    .cmp-specs-engine-data__info-items {
        grid-template-columns: repeat(4,1fr)
    }
}

@media(min-width:1016px) {
    .cmp-specs-engine-data {
        padding-bottom: 40px
    }

    .cmp-specs-engine-data__title .cmp-title__text {
        font-size: 24px;
        line-height: 1.2;
        margin: 0;
        word-break: break-word
    }

    .cmp-specs-engine-data__info-title .cmp-title__text {
        font-size: 20px;
        line-height: 1.5;
        margin: 0;
        word-break: break-word
    }

    .cmp-specs-engine-data__info-items {
        column-gap: 8%
    }
}

@media(min-width:1436px) {
    .cmp-specs-engine-data {
        padding-bottom: 46px
    }

    .cmp-specs-engine-data__wrapper {
        row-gap: 74px
    }
}

.cmp-specs-engine-data-item__label {
    font-size: 12px;
    line-height: 1;
    margin-bottom: 8px
}

.cmp-specs-engine-data-item__value {
    align-items: baseline
}

.cmp-specs-engine-data-item__value-odometer {
    font-size: 20px;
    line-height: 1.2
}

.cmp-specs-engine-data-item__value-unit {
    font-size: 12px;
    line-height: 1
}

@media(min-width:1016px) {
    .cmp-specs-engine-data-item__value-odometer {
        font-size: 24px;
        line-height: 1.2
    }
}

@media(min-width:1436px) {
    .cmp-specs-engine-data-item__value-odometer {
        font-size: 30px;
        line-height: 1.4
    }
}

.cmp-specs-engine-data {
    --bg-color: var(--color-bg-01);
    --title-font: "SeatBold",sans-serif;
    --title-color: var(--color-font-01);
    --text-font: "SeatBold",sans-serif;
    --text-color: var(--color-font-01);
    --label-font: "SeatRegular",sans-serif;
    --label-color: var(--color-font-01);
    --odometer-font: "SeatBold",sans-serif;
    --odometer-color: var(--color-font-01);
    --unit-font: "SeatBold",sans-serif;
    --unit-color: var(--color-font-02)
}
