﻿@keyframes shine-skeleton-lines {
    0 {
        background-position: -100px
    }

    40%,100% {
        background-position: 600px
    }
}

.mod__max-w-xl {
    max-width: 1436px;
    margin: auto
}

.cmp-specs-header {
    background: var(--color-bg-01)
}

.cmp-specs-header__wrapper {
    padding: 20px 16px
}

.cmp-specs-header__top, .cmp-specs-header__top-info {
    position: relative
}

.cmp-specs-header__top-info {
    z-index: 1
}

.cmp-specs-header__background-divider {
    position: absolute;
    content: '';
    width: 100vw;
    height: 100%;
    background-color: var(--color-bg-07);
    top: -20px;
    left: -16px
}

.cmp-specs-header__title {
    font-family: "SeatBlack",sans-serif;
    font-weight: 900;
    font-size: 30px
}

.cmp-specs-header__text {
    margin-top: 5px
}

    .cmp-specs-header__text .cmp-text, .cmp-specs-header__text .cmp-text p {
        color: var(--color-font-01);
        font-family: "SeatRegular",sans-serif;
        font-size: 16px;
        line-height: 1.2;
        text-align: center
    }

        .cmp-specs-header__text .cmp-text a {
            color: var(--color-font-01);
            text-decoration: underline
        }

        .cmp-specs-header__text .cmp-text h1, .cmp-specs-header__text .cmp-text h2, .cmp-specs-header__text .cmp-text h3, .cmp-specs-header__text .cmp-text h4, .cmp-specs-header__text .cmp-text h5, .cmp-specs-header__text .cmp-text h6, .cmp-specs-header__text .cmp-text blockquote, .cmp-specs-header__text .cmp-text pre {
            color: var(--color-font-01);
            font-family: "SeatRegular",sans-serif;
            font-size: 16px;
            line-height: 1.2;
            text-align: center;
            margin: 0
        }

.cmp-specs-header__wrapper-image {
    margin-top: 20px
}

.cmp-specs-header__info {
    margin-top: 10px
}

@media(min-width:764px) {
    .cmp-specs-header__wrapper {
        padding: 20px 24px 30px
    }

    .cmp-specs-header__text {
        margin-top: 16px
    }

        .cmp-specs-header__text .cmp-text, .cmp-specs-header__text .cmp-text p {
            font-size: 14px
        }

            .cmp-specs-header__text .cmp-text a {
                text-decoration: underline
            }

            .cmp-specs-header__text .cmp-text h1, .cmp-specs-header__text .cmp-text h2, .cmp-specs-header__text .cmp-text h3, .cmp-specs-header__text .cmp-text h4, .cmp-specs-header__text .cmp-text h5, .cmp-specs-header__text .cmp-text h6, .cmp-specs-header__text .cmp-text blockquote, .cmp-specs-header__text .cmp-text pre {
                font-size: 14px;
                margin: 0
            }

    .cmp-specs-header__wrapper-image {
        margin-top: 26px;
        width: 617px
    }

    .cmp-specs-header__background-divider {
        height: 85%;
        left: -24px
    }
}

@media(min-width:1016px) {
    .cmp-specs-header__wrapper {
        padding: 30px 32px
    }

    .cmp-specs-header__title {
        font-size: 40px
    }

    .cmp-specs-header__text {
        margin-top: 10px
    }

        .cmp-specs-header__text .cmp-text, .cmp-specs-header__text .cmp-text p {
            font-size: 20px
        }

            .cmp-specs-header__text .cmp-text a {
                text-decoration: underline
            }

            .cmp-specs-header__text .cmp-text h1, .cmp-specs-header__text .cmp-text h2, .cmp-specs-header__text .cmp-text h3, .cmp-specs-header__text .cmp-text h4, .cmp-specs-header__text .cmp-text h5, .cmp-specs-header__text .cmp-text h6, .cmp-specs-header__text .cmp-text blockquote, .cmp-specs-header__text .cmp-text pre {
                font-size: 20px;
                margin: 0
            }

    .cmp-specs-header__wrapper-image {
        width: 627px
    }

    .cmp-specs-header__background-divider {
        height: 82%;
        top: -30px;
        left: -32px
    }

    .cmp-specs-header__info {
        margin-top: 22px
    }
}

@media(min-width:1436px) {
    .cmp-specs-header__wrapper {
        padding: 50px 32px 30px
    }

    .cmp-specs-header__title {
        font-size: 48px
    }

    .cmp-specs-header__text {
        margin-top: 18px
    }

    .cmp-specs-header__wrapper-image {
        width: 883px
    }

    .cmp-specs-header__background-divider {
        height: 77%;
        top: -50px;
        left: calc((((100vw - 1436px)/2) + 32px) * -1)
    }
}
