/* The guarded page hook keeps the native nine-slot renderer and links. */
.sm-color-overview-native {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    padding: 24px 40px 48px;
    background: #000;
    color: #f2f2f2;
}

.sm-color-overview-native > .sm-color-overview-native-heading {
    grid-column: 1 / -1;
    margin: 0 0 8px;
    color: inherit;
}

/* The native parent includes .cms-sections; preserve that real DOM chain. */
.sm-color-overview-native > .cms-sections,
.sm-color-overview-native > .cms-sections > .cms-section.cms-section-default,
.sm-color-overview-native > .cms-sections > .cms-section.cms-section-default > .cms-section-default.boxed,
.sm-color-overview-native > .cms-sections > .cms-section.cms-section-default > .cms-section-default.boxed > .cms-block-teaser-three-columns,
.sm-color-overview-native > .cms-sections > .cms-section.cms-section-default > .cms-section-default.boxed > .cms-block-teaser-three-columns > .cms-block-container,
.sm-color-overview-native > .cms-sections > .cms-section.cms-section-default > .cms-section-default.boxed > .cms-block-teaser-three-columns > .cms-block-container > .cms-block-container-row {
    display: contents;
}

.sm-color-overview-native .cms-block-teaser-three-columns > .cms-block-container > .cms-block-container-row > .col-md-4 {
    width: auto;
    padding: 0;
}

/* Reset the native 240px minima (and the three unitless 270 declarations). */
.sm-color-overview-native .cms-element-teaser.teaser {
    height: auto;
    min-height: 0 !important;
    padding: 0 !important;
    color: inherit;
    background: #000;
}

.sm-color-overview-native .cms-element-teaser.teaser > .cms-element-teaser-inner {
    height: auto;
}

.sm-color-overview-native .cms-element-teaser.teaser > .cms-element-teaser-inner > .cms-element-teaser-inner-background {
    aspect-ratio: 1;
    height: auto;
    min-height: 0;
    max-height: none;
    background-size: contain;
    background-position: center;
    background-color: #000;
}

/* Specificity beats the existing global .cms-page .cms-section .teaser rule. */
.cms-page .sm-color-overview-native .cms-sections .cms-element-teaser.teaser .cms-element-teaser-inner > .cms-element-teaser-inner-container.cms-element-teaser-inner-container-1 {
    position: static;
    inset: auto;
    transform: none;
    padding: 16px 0 !important;
    background: #000 !important;
    color: #fff;
    font-size: 1rem;
    line-height: 1.4;
}

.sm-color-overview-native .cms-element-teaser-inner-container > .cms-element-teaser-inner-text-container {
    padding: 0 !important;
    color: #fff;
    overflow-wrap: anywhere;
}

.sm-color-overview-native .link--completely:focus-visible {
    outline: 3px solid #70d8ff;
    outline-offset: -3px;
}

@media (max-width: 767.98px) {
    .sm-color-overview-native {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
        padding: 20px 16px 32px;
    }
}