/**
 * This element is using CSS from the following:
 *
 * - opengemeenten_linkhandling/Partials/Button/OpenGemeentenLinkHandling-Button.css
 *
 * Variables can be set there globally or override them here!
 */

.spotlight {
    --font-size: var(--root-font-size); /* Reset: use REM */
}

.spotlight__visual {
    --border-width: var(--root-border-width);
    --color-border: var(--root-color-border);
}

.spotlight__header {
    --color: var(--root-color-text);
    --font-family: var(--root-heading-2-family);
    --font-size: var(--root-heading-2-size);
    --font-style: var(--root-heading-2-style);
    --font-weight: var(--root-heading-2-weight);
    --line-height: var(--root-heading-2-line-height);
}

.spotlight__text {
    --font-family: inherit;
    --font-size: 1em; /* Mobile 16px / > Mobile 18px */
    --font-style: normal;
    --font-weight: var(--root-font-weight--normal);
    --color: black;
}

.spotlight .button {
    --background-color: var(--root-color--primary);
    --border-top-color: var(--root-color--primary);
    --border-right-color: var(--root-color--primary);
    --border-bottom-color: var(--root-color--primary);
    --border-left-color: var(--root-color--primary);
    /*--border-radius: var(--root-border-radius);*/
    /*--border-style: solid;*/
    /*--border-top-width: var(--root-border-width);*/
    /*--border-right-width: var(--root-border-width);*/
    /*--border-bottom-width: var(--root-border-width);*/
    /*--border-left-width: var(--root-border-width);*/
    --color: var(--root-color--white);
    /*--font-weight: var(--root-font-weight--bold);*/
}

.spotlight .button:active,
.spotlight .button:focus,
.spotlight .button:hover {
    --background-color: var(--root-color--primary-dark);
    --border-top-color: var(--root-color--primary-dark);
    --border-right-color: var(--root-color--primary-dark);
    --border-bottom-color: var(--root-color--primary-dark);
    --border-left-color: var(--root-color--primary-dark);
}

@media (min-width: 62rem) {
    .spotlight--layout-6 .spotlight__content,
    .spotlight--layout-7 .spotlight__content {
        --color-background: var(--root-color-background--primary);
    }


    .spotlight--layout-6 .spotlight__header,
    .spotlight--layout-7 .spotlight__header {
        --color: var(--root-color--white);
    }

    .spotlight--layout-6 .spotlight__text,
    .spotlight--layout-7 .spotlight__text {
        --color: var(--root-color--white);
    }

    .spotlight--layout-6 .spotlight__text .link,
    .spotlight--layout-7 .spotlight__text .link {
        --color: inherit;
    }

    .spotlight--layout-6 .spotlight__text .link:active,
    .spotlight--layout-7 .spotlight__text .link:active,
    .spotlight--layout-6 .spotlight__text .link:focus,
    .spotlight--layout-7 .spotlight__text .link:focus,
    .spotlight--layout-6 .spotlight__text .link:hover,
    .spotlight--layout-7 .spotlight__text .link:hover {
        --color: inherit;
    }

    .spotlight--layout-6 .spotlight__text .link .icon,
    .spotlight--layout-7 .spotlight__text .link .icon {
        /*--fill: currentColor;*/
    }

    .spotlight--layout-6 .spotlight__text .link:hover .icon,
    .spotlight--layout-7 .spotlight__text .link:hover .icon {
        /*--fill: currentColor;*/
    }

    .spotlight.spotlight--layout-6 .button,
    .spotlight.spotlight--layout-7 .button {
        --background-color: var(--root-color--white);
        --border-top-color: var(--root-color--white);
        --border-right-color: var(--root-color--white);
        --border-bottom-color: var(--root-color--white);
        --border-left-color: var(--root-color--white);
        --color: var(--root-color-text);
    }

    .spotlight.spotlight--layout-6 .button:active,
    .spotlight.spotlight--layout-7 .button:active,
    .spotlight.spotlight--layout-6 .button:focus,
    .spotlight.spotlight--layout-7 .button:focus,
    .spotlight.spotlight--layout-6 .button:hover,
    .spotlight.spotlight--layout-7 .button:hover {
        --background-color: var(--root-color--white-dark);
        --border-top-color: var(--root-color--white-dark);
        --border-right-color: var(--root-color--white-dark);
        --border-bottom-color: var(--root-color--white-dark);
        --border-left-color: var(--root-color--white-dark);
    }
}

/* Primary */
.section--color-primary .spotlight__visual {
    --color-border: var(--root-color--lighten);
}

.section--color-primary .spotlight__header {
    --color: var(--root-color--white);
}

.section--color-primary .spotlight__text {
    --color: var(--root-color--white);
}

.section--color-primary .spotlight__text .link {
    --color: inherit;
    --text-decoration-color: inherit;
}

.section--color-primary .spotlight__text .link:active,
.section--color-primary .spotlight__text .link:focus,
.section--color-primary .spotlight__text .link:hover {
    --color: inherit;
}

.section--color-primary .spotlight__text .link .icon {
    --fill: currentColor;
}

.section--color-primary .spotlight__text .link:hover .icon {
    --fill: currentColor;
}

.spotlight.section--color-primary .button {
    --background-color: var(--root-color--white);
    --border-top-color: var(--root-color--white);
    --border-right-color: var(--root-color--white);
    --border-bottom-color: var(--root-color--white);
    --border-left-color: var(--root-color--white);
    --color: var(--root-color-text);
}

.spotlight.section--color-primary .button:active,
.spotlight.section--color-primary .button:focus,
.spotlight.section--color-primary .button:hover {
    --background-color: var(--root-color--white-dark);
    --border-top-color: var(--root-color--white-dark);
    --border-right-color: var(--root-color--white-dark);
    --border-bottom-color: var(--root-color--white-dark);
    --border-left-color: var(--root-color--white-dark);
}

@media (min-width: 62rem) {
    .section--color-primary.spotlight--layout-6 .spotlight__content,
    .section--color-primary.spotlight--layout-7 .spotlight__content {
        --color-background: var(--root-color--white);
    }

    .section--color-primary.spotlight--layout-6 .spotlight__header,
    .section--color-primary.spotlight--layout-7 .spotlight__header {
        --color: var(--root-color-text);
    }

    .section--color-primary.spotlight--layout-6 .spotlight__text,
    .section--color-primary.spotlight--layout-7 .spotlight__text {
        --color: var(--root-color-text);
    }

    .section--color-primary.spotlight--layout-6 .spotlight__text .link,
    .section--color-primary.spotlight--layout-7 .spotlight__text .link {
        /*--color: inherit;*/
    }

    .section--color-primary.spotlight--layout-6 .spotlight__text .link:active,
    .section--color-primary.spotlight--layout-7 .spotlight__text .link:active,
    .section--color-primary.spotlight--layout-6 .spotlight__text .link:focus,
    .section--color-primary.spotlight--layout-7 .spotlight__text .link:focus,
    .section--color-primary.spotlight--layout-6 .spotlight__text .link:hover,
    .section--color-primary.spotlight--layout-7 .spotlight__text .link:hover {
        /*--color: inherit;*/
    }

    .section--color-primary.spotlight--layout-6 .spotlight__text .link .icon,
    .section--color-primary.spotlight--layout-7 .spotlight__text .link .icon {
        /*--fill: currentColor;*/
    }

    .section--color-primary.spotlight--layout-6 .spotlight__text .link:hover .icon,
    .section--color-primary.spotlight--layout-7 .spotlight__text .link:hover .icon {
        /*--fill: currentColor;*/
    }

    .spotlight.section--color-primary.spotlight--layout-6 .button,
    .spotlight.section--color-primary.spotlight--layout-7 .button {
        --background-color: var(--root-color--primary);
        --border-top-color: var(--root-color--primary);
        --border-right-color: var(--root-color--primary);
        --border-bottom-color: var(--root-color--primary);
        --border-left-color: var(--root-color--primary);
        --color: var(--root-color--white);
    }

    .spotlight.section--color-primary.spotlight--layout-6 .button:active,
    .spotlight.section--color-primary.spotlight--layout-7 .button:active,
    .spotlight.section--color-primary.spotlight--layout-6 .button:focus,
    .spotlight.section--color-primary.spotlight--layout-7 .button:focus,
    .spotlight.section--color-primary.spotlight--layout-6 .button:hover,
    .spotlight.section--color-primary.spotlight--layout-7 .button:hover {
        --background-color: var(--root-color--primary-dark);
        --border-top-color: var(--root-color--primary-dark);
        --border-right-color: var(--root-color--primary-dark);
        --border-bottom-color: var(--root-color--primary-dark);
        --border-left-color: var(--root-color--primary-dark);
    }
}

/* Secondary */
.section--color-secondary .spotlight__visual {
    --color-border: var(--root-color--lighten);
}

.section--color-secondary .spotlight__header {
    --color: var(--root-color-text);
}

.section--color-secondary .spotlight__text {
    --color: var(--root-color-text);
}

.section--color-secondary .spotlight__text .link {
    --color: inherit;
    --text-decoration-color: inherit;
}

.section--color-secondary .spotlight__text .link:active,
.section--color-secondary .spotlight__text .link:focus,
.section--color-secondary .spotlight__text .link:hover {
    --color: inherit;
}

.section--color-secondary .spotlight__text .link .icon {
    --fill: currentColor;
}

.section--color-secondary .spotlight__text .link:hover .icon {
    --fill: currentColor;
}

.spotlight.section--color-secondary .button {
    --background-color: var(--root-color--white);
    --border-top-color: var(--root-color--white);
    --border-right-color: var(--root-color--white);
    --border-bottom-color: var(--root-color--white);
    --border-left-color: var(--root-color--white);
    --color: var(--root-color-text);
}

.spotlight.section--color-secondary .button:active,
.spotlight.section--color-secondary .button:focus,
.spotlight.section--color-secondary .button:hover {
    --background-color: var(--root-color--white-dark);
    --border-top-color: var(--root-color--white-dark);
    --border-right-color: var(--root-color--white-dark);
    --border-bottom-color: var(--root-color--white-dark);
    --border-left-color: var(--root-color--white-dark);
}

@media (min-width: 62rem) {
    .section--color-secondary.spotlight--layout-6 .spotlight__content,
    .section--color-secondary.spotlight--layout-7 .spotlight__content {
        --color-background: var(--root-color--white);
    }

    .section--color-secondary.spotlight--layout-6 .spotlight__header,
    .section--color-secondary.spotlight--layout-7 .spotlight__header {
        --color: var(--root-color-text);
    }

    .section--color-secondary.spotlight--layout-6 .spotlight__text,
    .section--color-secondary.spotlight--layout-7 .spotlight__text {
        --color: var(--root-color-text);
    }

    .section--color-secondary.spotlight--layout-6 .spotlight__text .link,
    .section--color-secondary.spotlight--layout-7 .spotlight__text .link {
        /*--color: inherit;*/
    }

    .section--color-secondary.spotlight--layout-6 .spotlight__text .link:active,
    .section--color-secondary.spotlight--layout-7 .spotlight__text .link:active,
    .section--color-secondary.spotlight--layout-6 .spotlight__text .link:focus,
    .section--color-secondary.spotlight--layout-7 .spotlight__text .link:focus,
    .section--color-secondary.spotlight--layout-6 .spotlight__text .link:hover,
    .section--color-secondary.spotlight--layout-7 .spotlight__text .link:hover {
        /*--color: inherit;*/
    }

    .section--color-secondary.spotlight--layout-6 .spotlight__text .link .icon,
    .section--color-secondary.spotlight--layout-7 .spotlight__text .link .icon {
        /*--fill: currentColor;*/
    }

    .section--color-secondary.spotlight--layout-6 .spotlight__text .link:hover .icon,
    .section--color-secondary.spotlight--layout-7 .spotlight__text .link:hover .icon {
        /*--fill: currentColor;*/
    }

    .spotlight.section--color-secondary.spotlight--layout-6 .button,
    .spotlight.section--color-secondary.spotlight--layout-7 .button {
        --background-color: var(--root-color--primary);
        --border-top-color: var(--root-color--primary);
        --border-right-color: var(--root-color--primary);
        --border-bottom-color: var(--root-color--primary);
        --border-left-color: var(--root-color--primary);
        --color: var(--root-color--white);
    }

    .spotlight.section--color-secondary.spotlight--layout-6 .button:active,
    .spotlight.section--color-secondary.spotlight--layout-7 .button:active,
    .spotlight.section--color-secondary.spotlight--layout-6 .button:focus,
    .spotlight.section--color-secondary.spotlight--layout-7 .button:focus,
    .spotlight.section--color-secondary.spotlight--layout-6 .button:hover,
    .spotlight.section--color-secondary.spotlight--layout-7 .button:hover {
        --background-color: var(--root-color--primary-dark);
        --border-top-color: var(--root-color--primary-dark);
        --border-right-color: var(--root-color--primary-dark);
        --border-bottom-color: var(--root-color--primary-dark);
        --border-left-color: var(--root-color--primary-dark);
    }
}

/* Support */
.section--color-support .spotlight__visual {
    --color-border: var(--root-color--darken);
}

.section--color-support .spotlight__header {
    --color: var(--root-color-text);
}

.section--color-support .spotlight__text {
    --color: var(--root-color-text);
}

.section--color-support .spotlight__text .link {
    --color: inherit;
    --text-decoration-color: inherit;
}

.section--color-support .spotlight__text .link:active,
.section--color-support .spotlight__text .link:focus,
.section--color-support .spotlight__text .link:hover {
    --color: inherit;
}

.section--color-support .spotlight__text .link .icon {
    --fill: currentColor;
}

.section--color-support .spotlight__text .link:hover .icon {
    --fill: currentColor;
}

.spotlight.section--color-support .button {
    /*--background-color: var(--root-color--primary);*/
    /*--border-top-color: var(--root-color--primary);*/
    /*--border-right-color: var(--root-color--primary);*/
    /*--border-bottom-color: var(--root-color--primary);*/
    /*--border-left-color: var(--root-color--primary);*/
    /*--color: var(--root-color--white);*/
}

.spotlight.section--color-support .button:active,
.spotlight.section--color-support .button:focus,
.spotlight.section--color-support .button:hover {
    /*--background-color: var(--root-color--primary-dark);*/
    /*--border-top-color: var(--root-color--primary-dark);*/
    /*--border-right-color: var(--root-color--primary-dark);*/
    /*--border-bottom-color: var(--root-color--primary-dark);*/
    /*--border-left-color: var(--root-color--primary-dark);*/
}

@media (min-width: 62rem) {
    .section--color-support.spotlight--layout-6 .spotlight__content,
    .section--color-support.spotlight--layout-7 .spotlight__content {
        --color-background: var(--root-color--white);
    }

    .section--color-support.spotlight--layout-6 .spotlight__header,
    .section--color-support.spotlight--layout-7 .spotlight__header {
        --color: var(--root-color-text);
    }

    .section--color-support.spotlight--layout-6 .spotlight__text,
    .section--color-support.spotlight--layout-7 .spotlight__text {
        --color: var(--root-color-text);
    }

    .section--color-support.spotlight--layout-6 .spotlight__text .link,
    .section--color-support.spotlight--layout-7 .spotlight__text .link {
        /*--color: inherit;*/
    }

    .section--color-support.spotlight--layout-6 .spotlight__text .link:active,
    .section--color-support.spotlight--layout-7 .spotlight__text .link:active,
    .section--color-support.spotlight--layout-6 .spotlight__text .link:focus,
    .section--color-support.spotlight--layout-7 .spotlight__text .link:focus,
    .section--color-support.spotlight--layout-6 .spotlight__text .link:hover,
    .section--color-support.spotlight--layout-7 .spotlight__text .link:hover {
        /*--color: inherit;*/
    }

    .section--color-support.spotlight--layout-6 .spotlight__text .link .icon,
    .section--color-support.spotlight--layout-7 .spotlight__text .link .icon {
        /*--fill: currentColor;*/
    }

    .section--color-support.spotlight--layout-6 .spotlight__text .link:hover .icon,
    .section--color-support.spotlight--layout-7 .spotlight__text .link:hover .icon {
        /*--fill: currentColor;*/
    }

    .spotlight.section--color-support.spotlight--layout-6 .button,
    .spotlight.section--color-support.spotlight--layout-7 .button {
        --background-color: var(--root-color--primary);
        --border-top-color: var(--root-color--primary);
        --border-right-color: var(--root-color--primary);
        --border-bottom-color: var(--root-color--primary);
        --border-left-color: var(--root-color--primary);
        --color: var(--root-color--white);
    }

    .spotlight.section--color-support.spotlight--layout-6 .button:active,
    .spotlight.section--color-support.spotlight--layout-7 .button:active,
    .spotlight.section--color-support.spotlight--layout-6 .button:focus,
    .spotlight.section--color-support.spotlight--layout-7 .button:focus,
    .spotlight.section--color-support.spotlight--layout-6 .button:hover,
    .spotlight.section--color-support.spotlight--layout-7 .button:hover {
        --background-color: var(--root-color--primary-dark);
        --border-top-color: var(--root-color--primary-dark);
        --border-right-color: var(--root-color--primary-dark);
        --border-bottom-color: var(--root-color--primary-dark);
        --border-left-color: var(--root-color--primary-dark);
    }
}

/* Grey */
.section--color-grey .spotlight__visual {
    --color-border: var(--root-color--darken);
}

.section--color-grey .spotlight__header {
    --color: var(--root-color-text);
}

.section--color-grey .spotlight__text {
    --color: var(--root-color-text);
}

.section--color-grey .spotlight__text .link {
    --color: inherit;
    --text-decoration-color: inherit;
}

.section--color-grey .spotlight__text .link:active,
.section--color-grey .spotlight__text .link:focus,
.section--color-grey .spotlight__text .link:hover {
    --color: inherit;
}

.section--color-grey .spotlight__text .link .icon {
    --fill: currentColor;
}

.section--color-grey .spotlight__text .link:hover .icon {
    --fill: currentColor;
}

.spotlight.section--color-grey .button {
    /*--background-color: var(--root-color--primary);*/
    /*--border-top-color: var(--root-color--primary);*/
    /*--border-right-color: var(--root-color--primary);*/
    /*--border-bottom-color: var(--root-color--primary);*/
    /*--border-left-color: var(--root-color--primary);*/
    /*--color: var(--root-color--white);*/
}

.spotlight.section--color-grey .button:active,
.spotlight.section--color-grey .button:focus,
.spotlight.section--color-grey .button:hover {
    /*--background-color: var(--root-color--primary-dark);*/
    /*--border-top-color: var(--root-color--primary-dark);*/
    /*--border-right-color: var(--root-color--primary-dark);*/
    /*--border-bottom-color: var(--root-color--primary-dark);*/
    /*--border-left-color: var(--root-color--primary-dark);*/
}

@media (min-width: 62rem) {
    .section--color-grey.spotlight--layout-6 .spotlight__content,
    .section--color-grey.spotlight--layout-7 .spotlight__content {
        --color-background: var(--root-color--white);
    }

    .section--color-grey.spotlight--layout-6 .spotlight__header,
    .section--color-grey.spotlight--layout-7 .spotlight__header {
        --color: var(--root-color-text);
    }

    .section--color-grey.spotlight--layout-6 .spotlight__text,
    .section--color-grey.spotlight--layout-7 .spotlight__text {
        --color: var(--root-color-text);
    }

    .section--color-grey.spotlight--layout-6 .spotlight__text .link,
    .section--color-grey.spotlight--layout-7 .spotlight__text .link {
        /*--color: inherit;*/
    }

    .section--color-grey.spotlight--layout-6 .spotlight__text .link:active,
    .section--color-grey.spotlight--layout-7 .spotlight__text .link:active,
    .section--color-grey.spotlight--layout-6 .spotlight__text .link:focus,
    .section--color-grey.spotlight--layout-7 .spotlight__text .link:focus,
    .section--color-grey.spotlight--layout-6 .spotlight__text .link:hover,
    .section--color-grey.spotlight--layout-7 .spotlight__text .link:hover {
        /*--color: inherit;*/
    }

    .section--color-grey.spotlight--layout-6 .spotlight__text .link .icon,
    .section--color-grey.spotlight--layout-7 .spotlight__text .link .icon {
        /*--fill: currentColor;*/
    }

    .section--color-grey.spotlight--layout-6 .spotlight__text .link:hover .icon,
    .section--color-grey.spotlight--layout-7 .spotlight__text .link:hover .icon {
        /*--fill: currentColor;*/
    }

    .spotlight.section--color-grey.spotlight--layout-6 .button,
    .spotlight.section--color-grey.spotlight--layout-7 .button {
        --background-color: var(--root-color--primary);
        --border-top-color: var(--root-color--primary);
        --border-right-color: var(--root-color--primary);
        --border-bottom-color: var(--root-color--primary);
        --border-left-color: var(--root-color--primary);
        --color: var(--root-color--white);
    }

    .spotlight.section--color-grey.spotlight--layout-6 .button:active,
    .spotlight.section--color-grey.spotlight--layout-7 .button:active,
    .spotlight.section--color-grey.spotlight--layout-6 .button:focus,
    .spotlight.section--color-grey.spotlight--layout-7 .button:focus,
    .spotlight.section--color-grey.spotlight--layout-6 .button:hover,
    .spotlight.section--color-grey.spotlight--layout-7 .button:hover {
        --background-color: var(--root-color--primary-dark);
        --border-top-color: var(--root-color--primary-dark);
        --border-right-color: var(--root-color--primary-dark);
        --border-bottom-color: var(--root-color--primary-dark);
        --border-left-color: var(--root-color--primary-dark);
    }
}

.spotlight {
    overflow: hidden;
}

.spotlight__visual {
    display: block;
}

.spotlight__image {
    height: auto;
    width: 100%;
    vertical-align: top;
}

@media (max-width: 61.999rem) {
    .spotlight:not(.spotlight--layout-3).section--color:not(.section--no-padding) {
        padding-top: 0;
    }

    .spotlight:not(.spotlight--layout-3) > .flow {
        padding-left: 0;
        padding-right: 0;
    }

    .spotlight:not(.spotlight--layout-3) .spotlight__content {
        padding-top: 3rem;
    }
}

@media (max-width: 47.999rem) {
    .spotlight:not(.spotlight--layout-3) {
        padding-bottom: 2rem;
    }

    .spotlight:not(.spotlight--layout-3) .spotlight__content {
        padding-top: 2rem;
    }
}

@media (min-width: 62rem) {
    .spotlight:not(.spotlight--layout-3) {
        min-height: 20em;
    }

    .spotlight.spotlight--layout-1:not(.section--color),
    .spotlight.spotlight--layout-2:not(.section--color) {
        min-height: 13.944em;
    }

    .spotlight--layout-0.section--color:not(.section--no-padding),
    .spotlight--layout-5.section--color:not(.section--no-padding) {
        padding-top: 0;
        padding-bottom: 0;
    }

    .spotlight:not(.spotlight--layout-3),
    .spotlight:not(.spotlight--layout-3) > .flow,
    .spotlight:not(.spotlight--layout-3) .spotlight__content {
        display: flex;
    }

    .spotlight:not(.spotlight--layout-3):not(.spotlight--layout-6):not(.spotlight--layout-7) .spotlight__container {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .spotlight--layout-6 .spotlight__container,
    .spotlight--layout-7 .spotlight__container {
        align-items: center;
        display: flex;
        min-height: 25.313rem;
    }

    .spotlight--layout-7 .spotlight__container {
        justify-content: flex-end;
    }

    .spotlight:not(.spotlight--layout-3) > .flow,
    .spotlight:not(.spotlight--layout-3) .spotlight__container,
    .spotlight:not(.spotlight--layout-3) .spotlight__content {
        width: 100%;
    }

    .spotlight.spotlight--layout-6 .spotlight__content,
    .spotlight.spotlight--layout-7 .spotlight__content {
        padding: 2.5rem;
        width: 28rem;
        z-index: 1;
    }

    .spotlight--layout-6 .spotlight__flow,
    .spotlight--layout-7 .spotlight__flow {
        padding: 0;
    }

    .spotlight--layout-0 .spotlight__visual,
    .spotlight--layout-5 .spotlight__visual,
    .spotlight--layout-6 .spotlight__visual,
    .spotlight--layout-7 .spotlight__visual {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
    }

    .spotlight--layout-1 .spotlight__visual {
        border-left-style: solid;
        grid-column: 2;
        grid-row: 1;
        padding-left: 2rem;
    }

    .spotlight--layout-2 .spotlight__visual {
        border-right-style: solid;
        padding-right: 2rem;
    }

    .spotlight--layout-0 .spotlight__image,
    .spotlight--layout-5 .spotlight__image,
    .spotlight--layout-6 .spotlight__image,
    .spotlight--layout-7 .spotlight__image {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: auto;
    }

    .spotlight--layout-0 .spotlight__image,
    .spotlight--layout-5 .spotlight__image {
        max-height: 100%;
        min-width: auto;
        min-height: 100%;
    }

    .spotlight--layout-6 .spotlight__image,
    .spotlight--layout-7 .spotlight__image {
        height: 25.313rem;
    }

    .spotlight--layout-0 .spotlight__image {
        left: 50%;
    }

    .spotlight--layout-5 .spotlight__image {
        right: 50%;
    }

    .spotlight--layout-6 .spotlight__image {
        right: 0;
    }

    .spotlight--layout-7 .spotlight__image {
        left: 0;
    }

    .spotlight--layout-0 .spotlight__flow,
    .spotlight--layout-1 .spotlight__flow {
        padding-left: 0;
        padding-right: 2rem;
    }

    .spotlight--layout-5 .spotlight__flow,
    .spotlight--layout-2 .spotlight__flow {
        padding-left: 2rem;
        padding-right: 0;
    }

    .spotlight--layout-5 .spotlight__content {
        grid-column: 2;
    }

    .spotlight--layout-0 .spotlight__content,
    .spotlight--layout-5 .spotlight__content {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
}

.spotlight {
    font-size: var(--font-size, 1rem);
}

.spotlight__content {
    background-color: var(--color-background, transparent);
}

.spotlight__header {
    font-family: var(--font-family, inherit);
    font-size: var(--font-size, 1.777em);
    font-style: var(--font-style, normal);
    font-weight: var(--font-weight, bold);
    color: var(--color, black);
    line-height: var(--line-height, 1.25);
}

.spotlight__text {
    font-family: var(--font-family, inherit);
    font-size: var(--font-size, 1em);
    font-style: var(--font-style, normal);
    font-weight: var(--font-weight, normal);
    color: var(--color, black);
}

@media (min-width: 62rem) {
    .spotlight--layout-1 .spotlight__visual {
        border-left-color: var(--color-border, hsla(0, 0%, 0%, 0.2));
        border-left-width: var(--border-width, 0.063rem);
    }

    .spotlight--layout-2 .spotlight__visual {
        border-right-color: var(--color-border, hsla(0, 0%, 0%, 0.2));
        border-right-width: var(--border-width, 0.063rem);
    }
}