﻿.header {
    width: 100%
}

    .header h1 {
        margin: 0
    }

    .header .background .image-video {
        width: 100%;
        height: auto;
        padding-right: 16px
    }

        .header .background .image-video img {
            width: 100%;
            height: auto;
            max-width: 100%
        }

    .header .background .plyr__controls {
        display: none
    }

    .header .background .car-title {
        width: 100%;
        padding: 20px 16px 0 16px
    }

        .header .background .car-title .eyebrow {
            font-family: "SeatRegular";
            font-size: 16px;
            font-stretch: normal;
            line-height: 20px
        }

            .header .background .car-title .eyebrow .seat {
                font-family: "SeatBlack"
            }

        .header .background .car-title .title {
            font-family: "SeatBlack";
            font-size: 48px;
            font-stretch: normal;
            line-height: 52px
        }

@media(max-width:763px) {
    .header .background .car-title .title.wx-has-ascenders {
        margin-top: 8px
    }
}

@media(min-width:764px) {
    .header .background .car-title .title.wx-has-ascenders {
        margin-top: 16px
    }
}

@media(min-width:1016px) {
    .header .background .car-title .title.wx-has-ascenders {
        margin-top: 24px
    }
}

.header .carworld-content {
    width: 100%;
    padding: 0 16px 24px 16px
}

    .header .carworld-content .subtitle {
        font-size: 16px;
        line-height: 20px;
        font-family: "SeatBold"
    }

        .header .carworld-content .subtitle.car-name {
            font-size: 20px;
            line-height: 24px
        }

    .header .carworld-content .highlights {
        margin-top: 20px;
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 16px
    }

        .header .carworld-content .highlights .highlight {
            display: flex;
            flex-direction: column;
            justify-content: space-between
        }

            .header .carworld-content .highlights .highlight .text {
                font-size: 14px;
                font-family: "SeatMedium";
                line-height: 16px;
                max-height: 32px;
                overflow: hidden
            }

            .header .carworld-content .highlights .highlight .value-unit {
                margin-top: 8px;
                display: flex;
                align-items: baseline
            }

                .header .carworld-content .highlights .highlight .value-unit .unit {
                    margin-left: 4px
                }

            .header .carworld-content .highlights .highlight .unit-value {
                margin-top: 8px;
                display: flex;
                align-items: baseline
            }

                .header .carworld-content .highlights .highlight .unit-value .value {
                    margin-left: 4px
                }

            .header .carworld-content .highlights .highlight .value {
                font-size: 20px;
                font-family: "SeatBold";
                line-height: 24px
            }

            .header .carworld-content .highlights .highlight .unit {
                font-size: 16px;
                font-family: "SeatBold";
                line-height: 20px
            }

    .header .carworld-content .cta {
        margin-top: 24px;
        width: 100%
    }

        .header .carworld-content .cta a {
            font-family: "SeatBold";
            font-size: 14px;
            line-height: 16px;
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: center;
            height: 40px;
            border-radius: 2px;
            padding: 11px 16px 13px
        }

            .header .carworld-content .cta a:hover {
                text-decoration: none
            }

@media(min-width:764px) {
    .header .background {
        display: grid;
        grid-template-columns: repeat(6,1fr);
        grid-gap: 32px;
        padding: 0 32px;
        position: relative
    }

        .header .background .image-video {
            grid-column: span 5;
            grid-column-end: 6;
            margin-left: -32px;
            width: calc(100% + 32px);
            padding-right: 0
        }

        .header .background .car-title {
            width: auto;
            position: absolute;
            right: 0;
            bottom: 0;
            padding: inherit
        }

            .header .background .car-title .eyebrow {
                font-size: 20px;
                line-height: 24px;
                text-align: right;
                padding-bottom: 13px
            }

            .header .background .car-title .title {
                font-family: "SeatBlack";
                font-size: 100px;
                line-height: 77px
            }

                .header .background .car-title .title::after {
                    content: "";
                    height: 100%;
                    display: inline-block
                }

    .header .carworld-content {
        padding: 0 32px 32px 32px;
        display: grid;
        grid-template-columns: repeat(6,1fr);
        grid-column-gap: 32px
    }

        .header .carworld-content .subtitle {
            position: absolute;
            font-size: 20px;
            line-height: 24px;
            font-family: "SeatBold";
            padding-right: 32px;
            margin-top: 20px
        }

            .header .carworld-content .subtitle.car-name {
                font-size: 24px;
                line-height: 28px;
                font-family: "SeatBlack"
            }

        .header .carworld-content .highlights {
            grid-gap: 24px 32px;
            grid-column: 1 / span 4;
            margin-top: 66px
        }

        .header .carworld-content .cta {
            align-self: end;
            grid-column: 5 / span 2
        }
}

@media(min-width:1016px) {
    .header .background .car-title .eyebrow {
        font-family: "SeatBook";
        font-size: 24px;
        line-height: 28px;
        padding-bottom: 15px
    }

    .header .background .car-title .title {
        font-size: 120px;
        line-height: 91px
    }

    .header .carworld-content {
        grid-template-columns: repeat(12,1fr)
    }

        .header .carworld-content .subtitle {
            margin-top: 24px;
            font-family: "SeatBlack";
            font-size: 24px;
            line-height: 28px
        }

            .header .carworld-content .subtitle.car-name {
                font-size: 30px;
                line-height: 32px
            }

        .header .carworld-content .highlights {
            grid-column: 1 / span 6;
            margin-top: 56px
        }

            .header .carworld-content .highlights .highlight .text {
                font-size: 16px;
                line-height: 20px;
                max-height: 40px
            }

            .header .carworld-content .highlights .highlight .value {
                font-size: 30px;
                font-family: "SeatBlack";
                line-height: 32px
            }

            .header .carworld-content .highlights .highlight .unit {
                font-size: 20px;
                line-height: 24px
            }

        .header .carworld-content .cta {
            grid-column: 10 / span 3
        }

            .header .carworld-content .cta a {
                font-size: 16px;
                line-height: 20px;
                height: 48px;
                padding: 13px 16px 15px 16px
            }
}

@media(min-width:1436px) {
    .header .background .car-title .eyebrow {
        font-size: 30px;
        line-height: 32px
    }

    .header .background .car-title .title {
        font-size: 140px;
        line-height: 107px
    }

    .header .carworld-content .subtitle {
        font-size: 30px;
        line-height: 32px;
        margin-top: 32px
    }

        .header .carworld-content .subtitle.car-name {
            font-size: 40px;
            line-height: 44px
        }

    .header .carworld-content .highlights {
        grid-column: 1 / span 8;
        grid-template-columns: repeat(4,1fr);
        margin-top: 74px
    }

    .header .carworld-content .cta {
        grid-column: 11 / span 2
    }
}
