
    .block-vehicle-colors .block-heading {
        font-size: 2.125rem;
        font-weight: 400;
        line-height: 1.4705;
    }

.block-vehicle-colors .block-content {
        position: relative;
        background-color: #f2f2f2;
    }

.block-vehicle-colors .block-content .view-switch-wrapper {
            position: relative;
            z-index: 1;
            padding-top: 1.75rem;
            display: flex;
            justify-content: center;
            align-items: center;
        }

.block-vehicle-colors .block-content .toggle-content {
            opacity: 0.3;
            z-index: -1;
            overflow: hidden;
            transition: opacity 0.3s ease-in-out;
        }

.block-vehicle-colors .block-content .toggle-content.active {
                opacity: 1;
                z-index: 0;
            }

.block-vehicle-colors .block-content .color-tabs-container {
            position: relative;
        }

.block-vehicle-colors .block-content .color-tabs-container.is-loading .colors-switch-list {
                    pointer-events: none;
                }

.block-vehicle-colors .block-content .color-tabs-container .tabs-loader {
                position: absolute;
                top: 50%;
                left: 50%;
                width: 3rem;
                height: 3rem;
                border-radius: 50%;
                display: grid;
                place-items: center;
                background: #ffffffe6;
                opacity: 0;
                visibility: hidden;
                transform: translate(-50%, -50%);
                transition: opacity 0.2s ease-in-out;
                z-index: 3;
            }

.block-vehicle-colors .block-content .color-tabs-container .tabs-loader .spinner {
                    width: 1.5rem;
                    height: 1.5rem;
                    border: 0.1875rem solid #d9d9d9;
                    border-top-color: #1f1f22;
                    border-radius: 50%;
                    animation: vehicle-colors-spin 0.8s linear infinite;
                }

.block-vehicle-colors .block-content .color-tabs-container.is-loading .tabs-loader {
                    opacity: 1;
                    visibility: visible;
                }

.block-vehicle-colors .block-content .color-tabs-container .visually-hidden {
                position: absolute;
                width: 0.0625rem;
                height: 0.0625rem;
                padding: 0;
                margin: -1px;
                overflow: hidden;
                clip: rect(0, 0, 0, 0);
                white-space: nowrap;
                border: 0;
            }

.block-vehicle-colors .block-content .exterior-wrapper {
            position: relative;
        }

.block-vehicle-colors .block-content .exterior-wrapper .exterior-colors-list {
                padding-top: 0.625rem;
            }

.block-vehicle-colors .block-content .exterior-wrapper .exterior-colors-list .exterior-color-item {
                    display: none;
                }

.block-vehicle-colors .block-content .exterior-wrapper .exterior-colors-list .exterior-color-item.active {
                        display: block;
                    }

.block-vehicle-colors .block-content .exterior-wrapper .exterior-colors-list .exterior-color-item .gallery-container .image-list.multiple {
                                cursor: grab;
                            }

.block-vehicle-colors .block-content .exterior-wrapper .exterior-colors-list .exterior-color-item .gallery-container .image-list .image-item-wrapper {
                                display: none;
                            }

.block-vehicle-colors .block-content .exterior-wrapper .exterior-colors-list .exterior-color-item .gallery-container .image-list .image-item-wrapper.active {
                                    display: block;
                                }

.block-vehicle-colors .block-content .exterior-wrapper .exterior-colors-list .exterior-color-item .gallery-container .image-list .image-item-wrapper .picture {
                                    position: relative;
                                    aspect-ratio: 1.6;
                                    width: 100%;
                                    overflow: hidden;
                                    margin-inline: auto;
                                }

.block-vehicle-colors .block-content .exterior-wrapper .exterior-colors-list .exterior-color-item .gallery-container .image-list .image-item-wrapper .picture .cover {
                                        min-width: 100%;
                                        height: 100%;
                                        -o-object-fit: cover;
                                           object-fit: cover;
                                        -o-object-position: center;
                                           object-position: center;
                                    }

.block-vehicle-colors .block-content .exterior-wrapper .colors-switch-list {
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 0.9375rem;
                padding-block: 3.125rem;
            }

.block-vehicle-colors .block-content .exterior-wrapper .colors-switch-list .color-button {
                    position: relative;
                    width: 1.625rem;
                    height: 1.625rem;
                    border-radius: 50%;
                    box-shadow: 0 0.0625rem 0.1875rem 0 #00000061;
                    cursor: pointer;
                }

.block-vehicle-colors .block-content .exterior-wrapper .colors-switch-list .color-button.active {
                        outline: 0.125rem solid #1f1f22;
                        outline-offset: 0.125rem;
                    }

.block-vehicle-colors .block-content .exterior-wrapper .colors-switch-list .color-button::before {
                        content: "";
                        position: absolute;
                        inset: 0;
                        background: linear-gradient(180deg, #ffffff42, #00000069);
                        border-radius: 50%;
                    }

.block-vehicle-colors .block-content .exterior-wrapper .colors-switch-list .color-button .label {
                        display: none;
                    }

.block-vehicle-colors .block-content .exterior-wrapper .indicator {
                width: 1.75rem;
                height: 2.25rem;
                line-height: 1;
                position: absolute;
                bottom: 6.5rem;
                left: 50%;
                transform: translateX(-50%);
                pointer-events: none;
            }

.block-vehicle-colors .block-content .interior-wrapper {
            position: absolute;
            inset: 0;
        }

.block-vehicle-colors .block-content .interior-wrapper .color-tabs-container {
                height: 100%;
            }

.block-vehicle-colors .block-content .interior-wrapper .color-tabs-container .interior-colors-list .interior-color-item {
                        opacity: 0;
                        height: 0;
                        overflow: hidden;
                        transition: opacity 0.5s ease-in-out;
                    }

.block-vehicle-colors .block-content .interior-wrapper .color-tabs-container .interior-colors-list .interior-color-item.active {
                            opacity: 1;
                            height: auto;
                        }

.block-vehicle-colors .block-content .interior-wrapper .color-tabs-container .colors-switch-list {
                    position: absolute;
                    left: 50%;
                    right: auto;
                    bottom: 2.5rem;
                    padding: 0.625rem;
                    border-radius: 1.75rem;
                    display: inline-flex;
                    justify-content: center;
                    align-items: center;
                    gap: 0.9375rem;
                    background: #ffffffd4;
                    transform: translateX(-50%);
                }

.block-vehicle-colors .block-content .interior-wrapper .color-tabs-container .colors-switch-list .color-button {
                        position: relative;
                        width: 1.625rem;
                        height: 1.625rem;
                        border-radius: 50%;
                        box-shadow: 0 0.0625rem 0.1875rem 0 #00000061;
                        cursor: pointer;
                    }

.block-vehicle-colors .block-content .interior-wrapper .color-tabs-container .colors-switch-list .color-button.active {
                            outline: 0.125rem solid #1f1f22;
                            outline-offset: 0.125rem;
                        }

.block-vehicle-colors .block-content .interior-wrapper .color-tabs-container .colors-switch-list .color-button::before {
                            content: "";
                            position: absolute;
                            inset: 0;
                            background: linear-gradient(180deg, #ffffff42, #00000069);
                            border-radius: 50%;
                        }

.block-vehicle-colors .block-content .interior-wrapper .color-tabs-container .colors-switch-list .color-button .label {
                            display: none;
                        }

@keyframes vehicle-colors-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@media screen and (min-width: 30rem) {
                .block-vehicle-colors .block-content .exterior-wrapper .exterior-colors-list {
                    padding: 0;
                }
}

@media screen and (min-width: 48rem) {
            .block-vehicle-colors .block-content .exterior-wrapper {
                max-width: 46.875rem;
                margin-inline: auto;
            }

                .block-vehicle-colors .block-content .exterior-wrapper .exterior-colors-list {
                    padding: 0;
                }
                                    .block-vehicle-colors .block-content .exterior-wrapper .exterior-colors-list .exterior-color-item .gallery-container .image-list .image-item-wrapper .picture {
                                        aspect-ratio: 1.8;
                                    }
                .block-vehicle-colors .block-content .exterior-wrapper .colors-switch-list {
                    padding-top: 2.5rem;
                }
}

@media screen and (min-width: 64rem) {
        .block-vehicle-colors .block-heading {
            padding-inline-start: 4.375rem;
            font-size: 2.625rem;
            line-height: 1.52;
        }
            .block-vehicle-colors .block-content .view-switch-wrapper {
                padding-top: 2.5rem;
            }
            .block-vehicle-colors .block-content .exterior-wrapper {
                max-width: 56.25rem;
                margin-inline: auto;
            }
                                    .block-vehicle-colors .block-content .exterior-wrapper .exterior-colors-list .exterior-color-item .gallery-container .image-list .image-item-wrapper .picture {
                                        aspect-ratio: 2;
                                    }
                .block-vehicle-colors .block-content .exterior-wrapper .colors-switch-list {
                    padding-top: 1.875rem;
                    gap: 1.25rem;
                }
                .block-vehicle-colors .block-content .exterior-wrapper .indicator {
                    bottom: 6.875rem;
                }
                    .block-vehicle-colors .block-content .interior-wrapper .color-tabs-container .colors-switch-list {
                        gap: 1.25rem;
                    }
}

@media screen and (min-width: 80rem) {
            .block-vehicle-colors .block-content .exterior-wrapper {
                max-width: 69.375rem;
            }

                .block-vehicle-colors .block-content .exterior-wrapper .indicator {
                    top: 0;
                    right: 0;
                    left: auto;
                    background: white;
                    width: 4.375rem;
                    height: 4.375rem;
                    border-radius: 50%;
                    padding: 1.125rem;
                }
                .block-vehicle-colors .block-content .exterior-wrapper .colors-switch-list {
                    padding-block: 0 5rem;
                }

                    .block-vehicle-colors .block-content .exterior-wrapper .colors-switch-list .color-button {
                        width: 2.25rem;
                        height: 2.25rem;
                    }
                    .block-vehicle-colors .block-content .interior-wrapper .color-tabs-container .colors-switch-list {
                        bottom: 4.375rem;
                    }

                        .block-vehicle-colors .block-content .interior-wrapper .color-tabs-container .colors-switch-list .color-button {
                            width: 2.25rem;
                            height: 2.25rem;
                        }
}

@media screen and (min-width: 96rem) {
        .block-vehicle-colors .block-heading {
            padding-inline-start: 8.75rem;
            font-size: 3.75rem;
            line-height: 1.46;
        }
            .block-vehicle-colors .block-content .view-switch-wrapper {
                padding-top: 3.75rem;
            }
}
