/**
 * 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!
 *
 * Content and the image can be floating.
 * For content this means the text is in a container with its own background color
 * For images this means they do not take the full height of the content element
 */

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

.spotlight__content {
    --color-background: transparent;
    --border-radius: 0;
}

.spotlight__visual {
    --border-radius: 0;
    --border-width: 0;
    --color-border: transparent;
}

.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);
}

@media (min-width: 62rem) {
    .spotlight--layout-3 .spotlight__header,
    .spotlight--layout-8 .spotlight__header {
        --font-size: var(--root-heading-1-size);
    }

    .spotlight--layout-13 .spotlight__header,
    .spotlight--layout-14 .spotlight__header,
    .spotlight--layout-15 .spotlight__header,
    .spotlight--layout-16 .spotlight__header {
        --font-size: var(--root-heading-3-size);
    }
}

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

.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--semi-bold);*/
}

.spotlight .button:is(:active, :focus, :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);
}

/* Floating visual */
.spotlight--visual-floating .spotlight__visual {
    --border-radius: 0.5rem;
    /*--border-width: 0;*/
    /*--color-border: transparent;*/
}

/* Floating content container */
.spotlight--content-floating .spotlight__content {
    --border-radius: 0.5rem;
}

/* Without section color */
.spotlight--content-floating:not(.section--color) .spotlight__content {
    --color-background: var(--root-color-background--primary);
}

.spotlight--content-floating:not(.section--color) .spotlight__header {
    --color: var(--root-color--white);
}

.spotlight--content-floating:not(.section--color) .spotlight__text {
    --color: var(--root-color--white);
}

.spotlight--content-floating:not(.section--color) .spotlight__text .link {
    --color: var(--root-color--white);
}

.spotlight--content-floating:not(.section--color) .spotlight__text .link:is(:active, :focus, :hover) {
    --color: var(--root-color--white);
}

.spotlight--content-floating:not(.section--color) .spotlight__text .link .icon {
    --fill: currentColor;
}

.spotlight--content-floating:not(.section--color) .spotlight__text .link:is(:active, :focus, :hover) .icon {
    --fill: currentColor;
}

.spotlight--content-floating:not(.section--color) .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--content-floating:not(.section--color) .button:is(:active, :focus, :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 */
/* No floating visual */
.section--color-primary:not(.spotlight--visual-floating) .spotlight__visual {
    /*--color-border: transparent;*/
}

/* No floating content */
.section--color-primary:not(.spotlight--content-floating) .spotlight__header {
    --color: var(--root-color--white);
}

.section--color-primary:not(.spotlight--content-floating) .spotlight__text {
    --color: var(--root-color--white);
}

.section--color-primary:not(.spotlight--content-floating) .spotlight__text .link {
    --color: inherit;
    --text-decoration-color: inherit;
}

.section--color-primary:not(.spotlight--content-floating) .spotlight__text .link:is(:active, :focus, :hover) {
    --color: inherit;
}

.section--color-primary:not(.spotlight--content-floating) .spotlight__text .link .icon {
    --fill: currentColor;
}

.section--color-primary:not(.spotlight--content-floating) .spotlight__text .link:is(:active, :focus, :hover) .icon {
    --fill: currentColor;
}

.spotlight.section--color-primary:not(.spotlight--content-floating) .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:not(.spotlight--content-floating) .button:is(:active, :focus, :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);
}

/* Floating content */
.section--color-primary.spotlight--content-floating .spotlight__content {
    --color-background: var(--root-color--white);
}

.section--color-primary.spotlight--content-floating .spotlight__header {
    /*--color: var(--root-color-text);*/
}

.section--color-primary.spotlight--content-floating .spotlight__text {
    /*--color: var(--root-color-text);*/
}

.section--color-primary.spotlight--content-floating .spotlight__text .link {
    /*--color: inherit;*/
}

.section--color-primary.spotlight--content-floating .spotlight__text .link:is(:active, :focus, :hover) {
    /*--color: inherit;*/
}

.section--color-primary.spotlight--content-floating .spotlight__text .link .icon {
    /*--fill: currentColor;*/
}

.section--color-primary.spotlight--content-floating .spotlight__text .link:is(:active, :focus, :hover) .icon {
    /*--fill: currentColor;*/
}

.spotlight.section--color-primary.spotlight--content-floating .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--content-floating .button:is(:active, :focus, :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 */
/* No floating visual */
.section--color-secondary:not(.spotlight--visual-floating) .spotlight__visual {
    /*--color-border: transparent;*/
}

/* No floating content */
.section--color-secondary:not(.spotlight--content-floating) .spotlight__header {
    --color: var(--root-color--white);
}

.section--color-secondary:not(.spotlight--content-floating) .spotlight__text {
    --color: var(--root-color--white);
}

.section--color-secondary:not(.spotlight--content-floating) .spotlight__text .link {
    --color: inherit;
    --text-decoration-color: inherit;
}

.section--color-secondary:not(.spotlight--content-floating) .spotlight__text .link:is(:active, :focus, :hover) {
    --color: inherit;
}

.section--color-secondary:not(.spotlight--content-floating) .spotlight__text .link .icon {
    --fill: currentColor;
}

.section--color-secondary:not(.spotlight--content-floating) .spotlight__text .link:is(:active, :focus, :hover) .icon {
    --fill: currentColor;
}

.spotlight.section--color-secondary:not(.spotlight--content-floating) .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:not(.spotlight--content-floating) .button:is(:active, :focus, :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);
}

/* Floating content */
.section--color-secondary.spotlight--content-floating .spotlight__content {
    --color-background: var(--root-color--white);
}

.section--color-secondary.spotlight--content-floating .spotlight__header {
    /*--color: var(--root-color-text);*/
}

.section--color-secondary.spotlight--content-floating .spotlight__text {
    /*--color: var(--root-color-text);*/
}

.section--color-secondary.spotlight--content-floating .spotlight__text .link {
    /*--color: inherit;*/
}

.section--color-secondary.spotlight--content-floating .spotlight__text .link:is(:active, :focus, :hover) {
    /*--color: inherit;*/
}

.section--color-secondary.spotlight--content-floating .spotlight__text .link .icon {
    /*--fill: currentColor;*/
}

.section--color-secondary.spotlight--content-floating .spotlight__text .link:is(:active, :focus, :hover) .icon {
    /*--fill: currentColor;*/
}

.spotlight.section--color-secondary.spotlight--content-floating .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--content-floating .button:is(:active, :focus, :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 */
/* No floating visual */
.section--color-support:not(.spotlight--visual-floating) .spotlight__visual {
    /*--color-border: transparent;*/
}

/* No floating content */
.section--color-support:not(.spotlight--content-floating) .spotlight__header {
    --color: var(--root-color-text);
}

.section--color-support:not(.spotlight--content-floating) .spotlight__text {
    --color: var(--root-color-text);
}

.section--color-support:not(.spotlight--content-floating) .spotlight__text .link {
    --color: inherit;
    --text-decoration-color: inherit;
}

.section--color-support:not(.spotlight--content-floating) .spotlight__text .link:is(:active, :focus, :hover) {
    --color: inherit;
}

.section--color-support:not(.spotlight--content-floating) .spotlight__text .link .icon {
    --fill: currentColor;
}

.section--color-support:not(.spotlight--content-floating) .spotlight__text .link:is(:active, :focus, :hover) .icon {
    --fill: currentColor;
}

.spotlight.section--color-support:not(.spotlight--content-floating) .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:not(.spotlight--content-floating) .button:is(:active, :focus, :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);*/
}

/* Floating content */
.section--color-support.spotlight--content-floating .spotlight__content {
    --color-background: var(--root-color--white);
}

.section--color-support.spotlight--content-floating .spotlight__header {
    /*--color: var(--root-color-text);*/
}

.section--color-support.spotlight--content-floating .spotlight__text {
    /*--color: var(--root-color-text);*/
}

.section--color-support.spotlight--content-floating .spotlight__text .link {
    /*--color: inherit;*/
}

.section--color-support.spotlight--content-floating .spotlight__text .link:is(:active, :focus, :hover) {
    /*--color: inherit;*/
}

.section--color-support.spotlight--content-floating .spotlight__text .link .icon {
    /*--fill: currentColor;*/
}

.section--color-support.spotlight--content-floating .spotlight__text .link:is(:active, :focus, :hover) .icon {
    /*--fill: currentColor;*/
}

.spotlight.section--color-support.spotlight--content-floating .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--content-floating .button:is(:active, :focus, :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 */
/* No floating visual */
.section--color-grey:not(.spotlight--visual-floating) .spotlight__visual {
    /*--color-border: transparent;*/
}

/* No floating content */
.section--color-grey:not(.spotlight--content-floating) .spotlight__header {
    --color: var(--root-color-text);
}

.section--color-grey:not(.spotlight--content-floating) .spotlight__text {
    --color: var(--root-color-text);
}

.section--color-grey:not(.spotlight--content-floating) .spotlight__text .link {
    --color: inherit;
    --text-decoration-color: inherit;
}

.section--color-grey:not(.spotlight--content-floating) .spotlight__text .link:is(:active, :focus, :hover) {
    --color: inherit;
}

.section--color-grey:not(.spotlight--content-floating) .spotlight__text .link .icon {
    --fill: currentColor;
}

.section--color-grey:not(.spotlight--content-floating) .spotlight__text .link:is(:active, :focus, :hover) .icon {
    --fill: currentColor;
}

.spotlight.section--color-grey:not(.spotlight--content-floating) .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:not(.spotlight--content-floating) .button:is(:active, :focus, :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);*/
}

/* Floating content */
.section--color-grey.spotlight--content-floating .spotlight__content {
    --color-background: var(--root-color--white);
}

.section--color-grey.spotlight--content-floating .spotlight__header {
    /*--color: var(--root-color-text);*/
}

.section--color-grey.spotlight--content-floating .spotlight__text {
    /*--color: var(--root-color-text);*/
}

.section--color-grey.spotlight--content-floating .spotlight__text .link {
    /*--color: inherit;*/
}

.section--color-grey.spotlight--content-floating .spotlight__text .link:is(:active, :focus, :hover) {
    /*--color: inherit;*/
}

.section--color-grey.spotlight--content-floating .spotlight__text .link .icon {
    /*--fill: currentColor;*/
}

.section--color-grey.spotlight--content-floating .spotlight__text .link:is(:active, :focus, :hover) .icon {
    /*--fill: currentColor;*/
}

.spotlight.section--color-grey.spotlight--content-floating .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--content-floating .button:is(:active, :focus, :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.section--color {
        padding-top: 0;
        padding-bottom: 3rem;
    }

    .spotlight .flow {
        padding-left: 0;
        padding-right: 0;
    }

    .spotlight.section--color.spotlight--visual-floating,
    .spotlight.spotlight--content-floating:not(.spotlight--visual-floating) {
        padding-top: 3rem;
    }

    .spotlight.spotlight--visual-floating .spotlight__visual {
        margin-left: 1rem;
        margin-right: 1rem;
    }

    .spotlight__content {
        padding-top: 2rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .spotlight--content-floating .spotlight__content {
        margin-left: 1rem;
        margin-right: 1rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        padding-bottom: 2rem;
    }
}

@media (min-width: 62rem) {
    .spotlight:not(.spotlight--layout-0, .spotlight--layout-3, .spotlight--layout-5, .spotlight--layout-8) {
        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--layout-8),
    .spotlight:not(.spotlight--layout-3, .spotlight--layout-8) > .flow,
    .spotlight:not(.spotlight--layout-3, .spotlight--layout-8) .spotlight__content {
        display: flex;
    }

    .spotlight:not(.spotlight--layout-3, .spotlight--layout-6, .spotlight--layout-7, .spotlight--layout-8, .spotlight--layout-11, .spotlight--layout-12, .spotlight--layout-13, .spotlight--layout-14, .spotlight--layout-15, .spotlight--layout-16) .spotlight__container {
        display: grid;
    }

    .spotlight:not(.spotlight--layout-0, .spotlight--layout-3, .spotlight--layout-5, .spotlight--layout-6, .spotlight--layout-7, .spotlight--layout-8, .spotlight--layout-9, .spotlight--layout-10, .spotlight--layout-11, .spotlight--layout-12, .spotlight--layout-13, .spotlight--layout-14, .spotlight--layout-15, .spotlight--layout-16) .spotlight__container {
        grid-template-columns: 1fr 1fr;
    }

    .spotlight--layout-0 .spotlight__container {
        grid-template-columns: 23.5rem 1fr;
    }

    .spotlight--layout-5 .spotlight__container {
        grid-template-columns: 1fr 23.5rem;
    }

    .spotlight--layout-9 .spotlight__container {
        grid-template-columns: 26.5rem 1fr;
    }

    .spotlight--layout-10 .spotlight__container {
        grid-template-columns: 1fr 26.5rem;
    }

    .spotlight--layout-0 .spotlight__container,
    .spotlight--layout-5 .spotlight__container {
        column-gap: 3rem;
    }

    .spotlight--layout-6 .spotlight__container,
    .spotlight--layout-7 .spotlight__container {
        align-items: center;
    }

    .spotlight--layout-6 .spotlight__container,
    .spotlight--layout-7 .spotlight__container,
    .spotlight--layout-11 .spotlight__container,
    .spotlight--layout-12 .spotlight__container,
    .spotlight--layout-13 .spotlight__container,
    .spotlight--layout-14 .spotlight__container,
    .spotlight--layout-15 .spotlight__container,
    .spotlight--layout-16 .spotlight__container{
        display: flex;
    }

    .spotlight--layout-6 .spotlight__container,
    .spotlight--layout-7 .spotlight__container,
    .spotlight--layout-11 .spotlight__container,
    .spotlight--layout-12 .spotlight__container {
        min-height: 30.9375rem;
    }

    .spotlight--layout-9 .spotlight__container,
    .spotlight--layout-10 .spotlight__container {
        height: 29rem;
        overflow: hidden;
    }

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

    .spotlight--layout-13 .spotlight__container,
    .spotlight--layout-14 .spotlight__container {
        align-items: flex-end;
        padding-bottom: 4rem;
    }

    .spotlight--layout-15 .spotlight__container,
    .spotlight--layout-16 .spotlight__container {
        padding-bottom: 5rem;
    }

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

    .spotlight.spotlight--layout-6 .spotlight__content,
    .spotlight.spotlight--layout-7 .spotlight__content,
    .spotlight.spotlight--layout-13 .spotlight__content,
    .spotlight.spotlight--layout-14 .spotlight__content {
        width: 30rem;
    }

    .spotlight.spotlight--layout-13 .spotlight__content,
    .spotlight.spotlight--layout-14 .spotlight__content {
        bottom: 0;
    }

    .spotlight.spotlight--layout-15 .spotlight__content,
    .spotlight.spotlight--layout-16 .spotlight__content {
        width: 28rem;
        right: 5rem;
        bottom: 0;
    }

    .spotlight.spotlight--layout-15 .spotlight__content {
        right: 5rem;
    }

    .spotlight.spotlight--layout-16 .spotlight__content {
        left: 5rem;
    }

    .spotlight.spotlight--layout-11 .spotlight__content,
    .spotlight.spotlight--layout-12 .spotlight__content {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
        width: calc((100% - 36.5rem) + 10rem);
    }

    .spotlight.spotlight--layout-11 .spotlight__content {
        padding-left: 15rem;
        padding-right: 6rem;
    }

    .spotlight.spotlight--layout-12 .spotlight__content {
        padding-left: 6rem;
        padding-right: 15rem;
    }

    .spotlight.spotlight--layout-9 .spotlight__content,
    .spotlight.spotlight--layout-10 .spotlight__content,
    .spotlight.spotlight--layout-11 .spotlight__content,
    .spotlight.spotlight--layout-12 .spotlight__content {
        height: 100%;
        align-items: center;
    }

    .spotlight.spotlight--layout-6 .spotlight__content,
    .spotlight.spotlight--layout-7 .spotlight__content,
    .spotlight.spotlight--layout-8 .spotlight__content,
    .spotlight.spotlight--layout-9 .spotlight__content,
    .spotlight.spotlight--layout-10 .spotlight__content,
    .spotlight.spotlight--layout-13 .spotlight__content,
    .spotlight.spotlight--layout-14 .spotlight__content {
        padding: 2.5rem;
        z-index: 1;
    }

    .spotlight.spotlight--layout-15 .spotlight__content,
    .spotlight.spotlight--layout-16 .spotlight__content {
        padding: 2rem 1.5rem;
        z-index: 1;
    }

    .spotlight--layout-6 .spotlight__flow,
    .spotlight--layout-7 .spotlight__flow,
    .spotlight--layout-9 .spotlight__flow,
    .spotlight--layout-10 .spotlight__flow,
    .spotlight--layout-11 .spotlight__flow,
    .spotlight--layout-12 .spotlight__flow,
    .spotlight--layout-13 .spotlight__flow,
    .spotlight--layout-14 .spotlight__flow,
    .spotlight--layout-15 .spotlight__flow,
    .spotlight--layout-16 .spotlight__flow {
        padding: 0;
    }

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

    .spotlight--layout-0 .spotlight__visual,
    .spotlight--layout-5 .spotlight__visual {
        aspect-ratio: 16 / 9;
        width: 100%;
    }

    .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__visual,
    .spotlight--layout-9 .spotlight__visual {
        order: 2;
    }

    .spotlight--layout-9 .spotlight__visual,
    .spotlight--layout-10 .spotlight__visual {
        display: flex;
        justify-content: center;
    }

    .spotlight--layout-13 .spotlight__visual,
    .spotlight--layout-14 .spotlight__visual {
        aspect-ratio: 16 / 9;
        width: 100%;
    }

    .spotlight--layout-13 .spotlight__visual {
        margin-right: 6.625rem;
    }

    .spotlight--layout-14 .spotlight__visual {
        margin-left: 6.625rem;
    }

    .spotlight--layout-15.spotlight__visual,
    .spotlight--layout-16 .spotlight__visual {
        aspect-ratio: 4 / 1;
        width: 100%;
    }

    .spotlight--layout-6 .spotlight__image,
    .spotlight--layout-7 .spotlight__image,
    .spotlight--layout-9 .spotlight__image,
    .spotlight--layout-10 .spotlight__image,
    .spotlight--layout-11 .spotlight__image,
    .spotlight--layout-12 .spotlight__image {
        position: absolute;
        width: auto;
    }

    .spotlight--layout-6 .spotlight__image,
    .spotlight--layout-7 .spotlight__image,
    .spotlight--layout-9 .spotlight__image,
    .spotlight--layout-10 .spotlight__image,
    .spotlight--layout-11 .spotlight__image,
    .spotlight--layout-12 .spotlight__image {
        top: 50%;
        transform: translateY(-50%);
    }

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

    .spotlight--layout-11 .spotlight__image,
    .spotlight--layout-12 .spotlight__image {
        width: 36.5rem;
    }

    .spotlight--layout-13 .spotlight__image,
    .spotlight--layout-13 .spotlight__image {
        width: 100%;
    }

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

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

    .spotlight--layout-13 .spotlight__image,
    .spotlight--layout-14 .spotlight__image {
        top: 0;
    }

    .spotlight--layout-0 .spotlight__flow,
    .spotlight--layout-1 .spotlight__flow,
    .spotlight--layout-2 .spotlight__flow,
    .spotlight--layout-5 .spotlight__flow {
        display: flex;
        align-items: center;
    }

    .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--layout-8 .spotlight__content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr auto;
        gap: 0 6rem;
        grid-template-areas:
            "heading text"
            "heading button";
    }

    .spotlight--layout-13 .spotlight__content,
    .spotlight--layout-14 .spotlight__content,
    .spotlight--layout-15 .spotlight__content,
    .spotlight--layout-16 .spotlight__content {
        position: absolute;
    }

    .spotlight--layout-8 .spotlight__header {
        grid-area: heading;
    }

    .spotlight--layout-8 .spotlight__text {
        grid-area: text;
    }

    .spotlight--layout-8 .spotlight__text p {
        margin-top: 0;
    }

    .spotlight--layout-8 .button {
        grid-area: button;
        margin-right: 0;
    }
}

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

.spotlight__content {
    background-color: var(--color-background, transparent);
    border-radius: var(--border-radius, 0.5rem);
}

.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);
}

.spotlight__image {
    border-radius: var(--border-radius, 0.5rem);
}

@media (max-width: 61.999rem) {
    .spotlight--visual-floating.spotlight--content-floating .spotlight__image {
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
    }

    .spotlight--visual-floating.spotlight--content-floating .spotlight__content {
        border-top-right-radius: 0;
        border-top-left-radius: 0;
    }
}

@media (min-width: 62rem) {
    .spotlight--layout-9 .spotlight__content {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .spotlight--layout-10 .spotlight__content {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    .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);
    }

    .spotlight--layout-9 .spotlight__image {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    .spotlight--layout-10 .spotlight__image {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
}