@import url(https://fonts.googleapis.com/css2?family=Asap:ital,wght@0,100..900;1,100..900&display=swap);
:root,
[data-dlw-background],
[data-theme-light] {
    --dlw-transition--duration: 0.2s;

    /* Or use  */
    --color--primary: rgb(40, 196, 56);
    --color--primary-light--20: color-mix(in srgb, var(--dlw-color--primary) 80%, white 20%);
    --color--primary-dark--20: color-mix(in srgb, var(--dlw-color--primary) 80%, black 20%);

    --color--secondary: rgb(215, 30, 209);
    --color--secondary-light--20: color-mix(in srgb, var(--dlw-color--secondary) 80%, white 20%);
    --color--secondary-dark--20: color-mix(in srgb, var(--dlw-color--secondary) 80%, black 20%);

    --color--text: rgb(51, 51, 51);

    --color--transparency: rgba(0, 0, 0, 0);

    /* Border colors, from lighter to dark */
    --color--border: rgb(128, 128, 128);

    /* Links */
    --dlw-link--color: var(--dlw-color--primary);
    --dlw-link--color--visited: var(--dlw-color--primary-light--20);
    --dlw-link--color--active: var(--dlw-color--primary-dark--20);

    /* Spacing */
    --spacing: 2rem;
    --spacing--tiny: 0.33rem;
    --spacing--small: 1rem;
    --spacing--large: 3rem;
    --spacing--huge: 5rem;

    /* Variable spacing depending on container query inline size */
    /* TODO: update to generic values */
    --spacing-cqi: clamp(20px, 4cqi, 50px);
    --spacing-cqi--small: clamp(20px, 3cqi, 40px);
    --spacing-cqi--large: clamp(20px, 4cqi, 60px);

    /* Borders */
    --border-radius: 0.625rem;
    --border-radius--large: 1.25rem;
    --ais-searchbox--border-radius: 99px;

    /* Fonts */
    --line-height: 1.5;

    --font-family--primary: Helvetica, Arial, sans-serif;

    --font-weight--regular: 400;
    --font-weight--medium: 600;
    --font-weight--bold: 700;
    --font-weight--bolder: 900;

    /* Font size based on Query width https://utopia.fyi/type/calculator */
    --font-size: 1rem;
    --font-size--h1: clamp(2.25rem, 2.0685rem + 0.8065cqi, 2.875rem);
    --font-size--h2: clamp(1.625rem, 1.4617rem + 0.7258cqi, 2.1875rem);
    --font-size--h3: 1.563rem;
    --font-size--h4: 1.375rem;
    --font-size--h5: 1.25rem;
    --font-size--h6: 1.125rem;
    --font-size--small: 0.875rem;
    --font-size--20px: 1.25rem;

    /* Potential wrapper */
    --dlw-wrapper--gutter: var(--dlw-spacing);
    --dlw-wrapper--width: var(--wrapper-width);

    --dlw-scroll-behavior: smooth;

    @media screen and (prefers-reduced-motion: reduce) {
        --dlw-scroll-behavior: auto;
        --dlw-transition--duration: 0;
    }
}
:root,
[data-dlw-background] {
    --dlw-transition--duration: 0.2s;

    /* Or use  */
    --dlw-color--primary: var(--color--primary);
    --dlw-color--primary-light--20: color-mix(in srgb, var(--dlw-color--primary) 80%, white 20%);
    --dlw-color--primary-light--40: color-mix(in srgb, var(--dlw-color--primary) 60%, white 40%);
    --dlw-color--primary-light--60: color-mix(in srgb, var(--dlw-color--primary) 40%, white 60%);
    --dlw-color--primary-light--80: color-mix(in srgb, var(--dlw-color--primary) 20%, white 80%);
    --dlw-color--primary-light--90: color-mix(in srgb, var(--dlw-color--primary) 10%, white 90%);
    --dlw-color--primary-light--95: color-mix(in srgb, var(--dlw-color--primary) 5%, white 95%);

    --dlw-color--primary-dark--20: color-mix(in srgb, var(--dlw-color--primary) 80%, black 20%);
    --dlw-color--primary-dark--40: color-mix(in srgb, var(--dlw-color--primary) 60%, black 40%);
    --dlw-color--primary-dark--60: color-mix(in srgb, var(--dlw-color--primary) 40%, black 60%);
    --dlw-color--primary-dark--80: color-mix(in srgb, var(--dlw-color--primary) 20%, black 80%);

    --dlw-color--secondary: var(--color--secondary);
    --dlw-color--secondary-light--20: color-mix(in srgb, var(--dlw-color--secondary) 80%, white 20%);
    --dlw-color--secondary-light--40: color-mix(in srgb, var(--dlw-color--secondary) 60%, white 40%);
    --dlw-color--secondary-light--60: color-mix(in srgb, var(--dlw-color--secondary) 40%, white 60%);
    --dlw-color--secondary-light--80: color-mix(in srgb, var(--dlw-color--secondary) 20%, white 80%);
    --dlw-color--secondary-light--90: color-mix(in srgb, var(--dlw-color--secondary) 10%, white 90%);
    --dlw-color--secondary-light--95: color-mix(in srgb, var(--dlw-color--secondary) 5%, white 95%);

    --dlw-color--secondary-dark--20: color-mix(in srgb, var(--dlw-color--secondary) 80%, black 20%);
    --dlw-color--secondary-dark--40: color-mix(in srgb, var(--dlw-color--secondary) 60%, black 40%);
    --dlw-color--secondary-dark--60: color-mix(in srgb, var(--dlw-color--secondary) 40%, black 60%);    
    --dlw-color--secondary-dark--80: color-mix(in srgb, var(--dlw-color--secondary) 20%, black 80%);

    --dlw-color--text: var(--color--text);

    --dlw-color--focus: currentColor;
    --dlw-color--transparency: var(--color--transparency);

    --dlw-color-bg--primary: var(--color--primary);
    --dlw-color-bg--secondary: var(--color--secondary);

    /* Border colors, from lighter to dark */
    --dlw-color--border: var(--dlw-color--border);
    --dlw-color--border-1: color-mix(in srgb, white 80%, var(--color--border) 20%); 
    --dlw-color--border-2: color-mix(in srgb, white 60%, var(--color--border) 40%);
    --dlw-color--border-3: color-mix(in srgb, white 40%, var(--color--border) 60%);
    --dlw-color--border-4: color-mix(in srgb, white 20%, var(--color--border) 80%);
    --dlw-color--border-5: color-mix(in srgb, white 10%, var(--color--border) 90%);

    /* Headings */
    --dlw-heading--color: var(--heading--color);

    /* Links */
    --dlw-link--color: var(--dlw-color--primary);
    --dlw-link--color--visited: var(--dlw-color--primary-light--20);
    --dlw-link--color--active: var(--dlw-color--primary-dark--20);

    /* Spacing */
    --dlw-spacing: var(--spacing);
    --dlw-spacing--tiny: var(--spacing--tiny);
    --dlw-spacing--small: var(--spacing--small);
    --dlw-spacing--large: var(--spacing--large);
    --dlw-spacing--huge: var(--spacing--huge);

    /* Variable spacing depending on container query inline size */
    --dlw-spacing-cqi: var(--spacing-cqi);
    --dlw-spacing-cqi--small: var(--spacing-cqi--small);
    --dlw-spacing-cqi--large: var(--spacing-cqi--large);

    /* Borders */
    --dlw-border-radius: var(--border-radius);

    /* Shadows */
    --dlw-shadow-color: 0deg 0% 0%;
    --dlw-shadow--small:
        0.3px 0.3px 0.5px hsl(var(--dlw-shadow-color) / 0.1),
        0.5px 0.6px 0.9px -1.2px hsl(var(--dlw-shadow-color) / 0.1),
        1.3px 1.3px 2.1px -2.5px hsl(var(--dlw-shadow-color) / 0.1);
    --dlw-shadow:
        0.3px 0.3px 0.5px hsl(var(--dlw-shadow-color) / 0.11),
        1.1px 1.1px 1.8px -0.8px hsl(var(--dlw-shadow-color) / 0.11),
        2.7px 2.8px 4.4px -1.7px hsl(var(--dlw-shadow-color) / 0.11),
        6.6px 6.7px 10.6px -2.5px hsl(var(--dlw-shadow-color) / 0.11);

    /* Fonts */
    --dlw-line-height: var(--line-height);

    --dlw-font-family: var(--font-family--primary);

    --dlw-font-weight--medium: var(--font-weight--medium);
    --dlw-font-weight--bold: var(--font-weight--bold);
    --dlw-font-weight--bolder: var(--font-weight--bolder);
    --dlw-font-weight--heading: var(--font-weight--bold);

    /* Font size based on Query width https://utopia.fyi/type/calculator */
    --dlw-font-size: var(--font-size);
    --dlw-font-size--h1: var(--font-size--h1);
    --dlw-font-size--h2: var(--font-size--h2);
    --dlw-font-size--h3: var(--font-size--h3);
    --dlw-font-size--h4: var(--font-size--h4);
    --dlw-font-size--h5: var(--font-size--h5);
    --dlw-font-size--h6: var(--font-size--h6);
    --dlw-font-size--small: var(--font-size--small);
    --dlw-font-size--20px: var(--font-size--)20px;

    --dlw-font-weight--h1: var(--font-weight--bold);
    --dlw-font-weight--h2: var(--font-weight--bold);
    --dlw-font-weight--h3: var(--font-weight--bold);
    --dlw-font-weight--h4: var(--font-weight--bold);
    --dlw-font-weight--h5: var(--font-weight--bold);
    --dlw-font-weight--h6: var(--font-weight--bold);

    /* Potential wrapper */
    --dlw-wrapper--gutter: var(--dlw-spacing);
    --dlw-wrapper--width: var(--wrapper-width);
    
    --dlw-scroll-behavior: smooth;

    @media screen and (prefers-reduced-motion: reduce) {
        --dlw-scroll-behavior: auto;
        --dlw-transition--duration: 0;
    }
}
:root {
    --wrapper-width: 90rem;
    --wrapper-width--small: 65rem;
    --wrapper-width--tiny: 50rem;
    --wrapper-width--large: 110rem;
}

.o-wrapper {
    margin-inline: auto;
    padding-inline: var(--spacing);
    max-width: calc(var(--wrapper-width) + var(--spacing));
}

.o-wrapper--tiny {
    --wrapper-width: var(--wrapper-width--tiny);
}

.o-wrapper--small {
    --wrapper-width: var(--wrapper-width--small);
}

.o-wrapper--large {
    --wrapper-width: var(--wrapper-width--large);
}


.dlw-skip-link {
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    color: #fff;
    background: var(--dlw-color--primary);
    padding: 0.5rem 1rem;
    display: inline-block;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
    text-align: center;
    margin: 0;
    z-index: 10000;
    transform: translateX(-200%);
    text-decoration: none;

    &:hover,
    &:focus,
    &:focus-visible {
        transform: translateX(0);
        text-decoration: none;
        color: #fff;
        outline: none;
    }
}

/* Essential: Make the tab list display as tabs */
dlw-tabs [slot="tabs"] {
    display: flex;
    list-style: none;
    padding: var(--dlw-tabs__nav--padding, 0);
    margin: 0;
}

/* Essential: Remove list item display to maintain flex layout */
dlw-tabs [slot="tabs"] li {
    display: contents;
}

/* Essential: Basic tab styling for functionality */
dlw-tabs [slot="tabs"] a {
    display: block;
    text-decoration: none;
    /* Add your visual styling here */
}

/* Essential: Style selected tabs (automatically managed by component) */
dlw-tabs [slot="tabs"] a[aria-selected="true"] {
    /* Add your active tab styling here */
}

/* Essential: Ensure hidden panels are not visible (automatically managed) */
dlw-tabs [role="tabpanel"][hidden] {
    display: none;
}

/* Optional: Focus styles for accessibility */
dlw-tabs [slot="tabs"] a:focus {
    outline: 2px solid color-mix(in srgb, var(--dlw-color--primary) 20%, transparent);
    outline-offset: -2px;
}

/* Vertical tabs layout (when is-vertical attribute is present) */
dlw-tabs[is-vertical] {
    display: flex;
    align-items: flex-start;
}

dlw-tabs[is-vertical] [slot="tabs"] {
    flex-direction: column;
    /* Add minimum width as needed */
}

dlw-tabs[is-vertical] [role="tabpanel"] {
    flex: 1;
    /* Add your panel styling here */
}

/*
  1. Use a more-intuitive box-sizing model.
*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

/*
    2. Remove default margin
  */
* {
  margin: 0;
}

/*
    3. Remove built-in form typography styles
  */
input,
button,
textarea,
select {
  font: inherit;
}

/*
    7. Avoid text overflows
  */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}
html {
    scroll-behavior: var(--dlw-scroll-behavior);
}

body {
    color: var(--color--text);
    font-family: var(--font-family--primary);
    font-size: var(--font-size, 1rem);
    line-height: var(--line-height, 1.5);
    accent-color: var(--color--primary);
    -webkit-font-smoothing: antialiased;
}

main {
    min-height: calc(100dvh - var(--dlw-header--height) - var(--dlw-footer-end--min-height));
}
/* Targets elements that are scroll into view via eg. anchor tags. Takes into account height of header */
:target {
    scroll-margin-top: var(--set-scroll-margin-top, calc(var(--dlw-header--height, 0) + var(--dlw-spacing)));
}

:focus-visible {
    outline: 2px dotted var(--dlw-color--focus);
    outline-offset: 2px;
}

:where(summary) {
    cursor: pointer;
    list-style: none;
    user-select: none;

    &::-webkit-details-marker {
        display: none;
    }
}

:where(strong) {
    font-weight: var(--dlw-font-weight--bold, bold);
}

:where(figure, figcaption, blockquote) {
    padding: 0;
    margin: 0;
}

:where(p) {
    margin: 0 0 1.5em;
}

:where(dt) {
    font-weight: var(--dlw-font-weight--bold);
}

:where(address) {
    font-style: normal;
}

::backdrop {
    background: rgba(0, 0, 0, 0);
}

/* Add transitions for dialogs, popover and their backdrop */
@supports(transition-behavior: allow-discrete) {

    /* This is commented because of a bug in dlw-popover. Once the fix is pushed, this can be added again. */
    /* [popover],
    dialog,
    ::backdrop {
        transition: display var(--dlw-transition--duration) allow-discrete,
            overlay var(--dlw-transition--duration) allow-discrete,
            opacity var(--dlw-transition--duration);
        opacity: 0;
    }

    :popover-open,
    :popover-open::backdrop,
    dialog[open],
    dialog[open]::backdrop {
        opacity: 1;
        transition-delay: 0.1s;
        @starting-style {
            opacity: 0;
        }
    } */
}
:where(picture, img) {
    display: inline-block;
    max-width: 100%;
    height: auto;
}

:where(svg) {
    fill: var(--svg-fill, currentColor);
    width: var(--svg-size, 1em);
    height: var(--svg-size, 1em);
    flex-shrink: 0;
    display: block;
}


h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
    color: var(--dlw-heading--color, currentColor);
    display: block;
    margin-block-end: 0.3em;
    text-wrap: balance;
}

h1,
.h1 {
    font-weight: var(--dlw-font-weight--h1);
    font-size: var(--dlw-font-size--h1);
    line-height: var(--dlw-font-line-height--h1, 1);
}

h2,
.h2 {
    font-weight: var(--dlw-font-weight--h2);
    font-size: var(--dlw-font-size--h2);
    line-height: var(--dlw-font-line-height--h2, 1.2);
}

h3,
.h3 {
    font-weight: var(--dlw-font-weight--h3);
    font-size: var(--dlw-font-size--h3);
    line-height: var(--dlw-font-line-height--h3, 1.2);
}

h4,
.h4 {
    font-weight: var(--dlw-font-weight--h4);
    font-size: var(--dlw-font-size--h4);
    line-height: var(--dlw-font-line-height--h4, 1.3);
}

h5,
.h5 {
    font-weight: var(--dlw-font-weight--h5);
    font-size: var(--dlw-font-size--h5);
    line-height: var(--dlw-font-line-height--h5, 1.3);
}

h6,
.h6 {
    font-weight: var(--dlw-font-weight--h6);
    font-size: var(--dlw-font-size--h6);
    line-height: var(--dlw-font-line-height--h6, 1.3);
}
a {
    color: var(--dlw-link--color, currentColor);
    transition: var(--dlw-link--transition, color var(--dlw-transition--duration) ease);
    text-decoration: var(--dlw-link--text-decoration, underline);
    text-decoration-color: currentColor;
    text-underline-offset: 0.15em;
    
    &:visited {
        color: var(--dlw-link--color--visited, var(--dlw-link--color, currentColor));
    }

    &:active,
    &:hover,
    &:focus {
        cursor: pointer;
        color: var(--dlw-link--color--active, var(--dlw-link--color, currentColor));
    }

    &:disabled {
        cursor: default;
    }
}
input,
select,
textarea {
	background-color: var(--color--background);
	border: 1px solid var(--color--border);
	border-radius: var(--border-radius);
	color: var(--color--text);
	line-height: 1.5;
	padding: 0 var(--spacing);
	width: 100%;
	height: 40px;
	outline: none;

	&:focus,
	&:active {
		box-shadow: var(--box-shadow--input);
	}

	&:disabled,
	&[disabled] {
		color: var(--color--gray);
		background-color: rgba(#f2f2f2, 0.3);
	}
}

textarea {
	padding: var(--spacing--small) var(--spacing);
	min-height: 125px;
}

input[type="range"] {
	border: none;
	width: auto;
}

input[type="checkbox"],
input[type="radio"] {
	width: auto;
	height: auto;
}

option {
	padding: 2px 0;
}



:root {
    --dlw-breadcrumb--padding: var(--dlw-spacing--small) 0;
    --dlw-breadcrumb--font-size: var(--dlw-font-size--small);
    --dlw-breadcrumb--svg-size: 1.2rem;
    --dlw-breadcrumb--svg-fill: currentColor;
    --dlw-breadcrumb--gap: var(--dlw-spacing--tiny);
}

.dlw-breadcrumb {
    display: block;
    padding: var(--dlw-breadcrumb--padding);
    color: currentColor;
    font-size: var(--dlw-breadcrumb--font-size);
    container: breadcrumb / inline-size;
    
    --svg-size: var(--dlw-breadcrumb--svg-size);
    --svg-fill: var(--dlw-breadcrumb--svg-fill);

    ol {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--dlw-breadcrumb--gap);
        margin: 0;
        padding: 0;
    }

    li {
        display: flex;
        gap: var(--dlw-breadcrumb--gap);
        align-items: center;
    }

    [aria-current="page"] {
        font-weight: var(--dlw-font-weight--bold);
        text-decoration: none;
    }

    @container breadcrumb (width < 25rem) {
        ol li:first-child,
        ol li:last-child {
            display: none;
        }
        
        ol li:nth-last-child(2) svg {
            display: none;
        }
    }
}
:root {
    --dlw-button--primary--color: var(--color--text);
    --dlw-button--primary--background-color: var(--dlw-color--primary);
    --dlw-button--primary--border: 2px solid var(--dlw-color--primary);
    --dlw-button--primary-hover--background-color: var(--dlw-color--secondary-dark--95);
    
    --dlw-button--secondary--color: var(--color--text);
    --dlw-button--secondary--background-color: var(--dlw-color--secondary);
    --dlw-button--secondary--border: none;
    --dlw-button--secondary-hover--background-color: var(--dlw-color--secondary-dark--95);
}

.dlw-button, a.dlw-button {
    --svg-size: 1.2em;

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--dlw-spacing--small);
    background: transparent;
    text-decoration: none;

    line-height: 1;

    cursor: pointer;

    border: none;
    transition-property: color, background;
    transition-duration: var(--dlw-transition--duration);
    transition-timing-function: ease-in-out;
    color: var(--dlw-button--color);
    background-color: var(--dlw-button--background-color);
    border-radius: var(--dlw-button--border-radius, 999px);
    border: var(--dlw-button--border);

    &.dlw-button-primary,
    &.dlw-button-secondary {
        padding: var(--dlw-button--border-radius, var(--dlw-spacing--tiny) var(--dlw-spacing--small));
        min-height: 45px;
        font-weight: var(--dlw-button--font-weight, var(--dlw-font-weight--bold));
    }

    &.dlw-button-primary {
        /* Default is primary */
        --dlw-button--color: var(--dlw-button--primary--color, var(--dlw-button--color));
        --dlw-link--color: var(--dlw-button--primary--color, var(--dlw-button--color));
        --dlw-button--background-color: var(--dlw-button--primary--background-color);
        --dlw-color--focus: color-mix(in srgb, var(--dlw-button--primary--background-color) 80%, black 20%);
        --dlw-button--border: var(--dlw-button--primary--border);

        &:hover,
        &:focus {
            background: var(--dlw-button--primary-hover--background-color, color-mix(in srgb, var(--dlw-button--primary--background-color) 80%, black 20%));
            --dlw-link--color--visited: var(--dlw-button--primary-hover--background-color, color-mix(in srgb, var(--dlw-button--primary--background-color) 80%, black 20%));
        }
    }

    &.dlw-button-secondary {
        --dlw-button--color: var(--dlw-button--secondary--color, var(--dlw-button--color));
        --dlw-link--color: var(--dlw-button--secondary--color, var(--dlw-button--color));
        --dlw-button--background-color: var(--dlw-button--secondary--background-color);
        --dlw-color--focus: color-mix(in srgb, var(--dlw-button--secondary--background-color) 80%, black 20%);
        --dlw-button--border: var(--dlw-button--secondary--border);

        &:hover,
        &:focus {
            background: var(--dlw-button--secondary-hover--background-color, color-mix(in srgb, var(--dlw-button--secondary--background-color) 80%, black 20%));
            --dlw-link--color--visited: var(--dlw-button--secondary-hover--background-color, color-mix(in srgb, var(--dlw-button--secondary--background-color) 80%, black 20%));
        }
    }

    &:is(&:disabled) {
        cursor: default;
        color: var(--dlw-button--color);
        background-color: var(--dlw-color--disabled);
        border: none;

        &:hover,
        &:focus {
            color: var(--dlw-button--color);
            border-color: currentColor;
        }
    }
}

[data-dlw-theme="dark"] .dlw-button {
    &.dlw-button-primary {
        --dlw-color--focus: #fff;
        background-color: #fff;
        color: var(--dlw-color--primary);

        &:hover,
        &:focus {
            background-color: #fff;
        }
    }

    &.dlw-button-secondary {
        color: #fff;
        background: transparent;
        --dlw-color--focus: #fff;

        &:hover,
        &:focus {
            background-color: transparent;
        }
    }

    &:is(&:disabled) {
        color: var(--dlw-color--text);
        background-color: var(--dlw-color--disabled);
    }
}
.dlw-button-wrapper {    
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--dlw-spacing--small);
}
.dlw-badge {
    display: inline-block;
    padding: var(--dlw-spacing--tiny);
    background: var(--dlw-color--primary);
    text-transform: uppercase;
    color: #fff;
    font-weight: var(--dlw-font-weight--bold);
    font-size: var(--dlw-font-size--small);
    border-radius: calc(var(--dlw-border-radius, 0) / 2);
    line-height: 1;
}
:root {
    --dlw-card__media--aspect-ratio: 3/2;
    --dlw-card--background: var(--dlw-color--white);
}

/* Principles according to https://inclusive-components.design/cards/ */
.dlw-card,
dlw-internal-resource-card,
dlw-external-resource-card,
dlw-card {
    display: block;
    container: card / inline-size;
    position: relative;
    height: 100%;
    width: var(--dlw-card--width);

    article {
        display: grid;
        grid-template-rows: auto 1fr;
        grid-template-areas: "media" "body";
        gap: var(--dlw-spacing--small);
        height: 100%;
        border-radius: var(--dlw-border-radius);
        overflow: clip; /* For border-radius */
        border: var(--dlw-card--border);
        background: var(--dlw-card--background);
        color: var(--dlw-color--text);

        h3 a {
            text-decoration: none;
        }

        /* Responsive layout: media on left when container > 31.25rem (500px) */
        @container card (min-width: 31.25rem) {
            grid-template-columns: minmax(0, 50%) 1fr;
            grid-template-rows: 1fr;
            grid-template-areas: "media body";

            .dlw-card__media {
                img {
                    object-fit: cover;
                    width: 100%;
                    height: 100%;
                    max-width: 28rem;
                    min-height: 21rem;
                }
            }

            .dlw-card__body {
                max-width: 100%;
            }
        }
    }

    p:last-child {
        margin: 0;
    }

    .dlw-card__media {
        grid-area: media;
        position: relative;
        overflow: hidden;
        align-self: stretch;

        img,
        video,
        picture {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
            object-position: center;
            aspect-ratio: var(--dlw-card__media--aspect-ratio);
            border-radius: var(--dlw-border-radius);
        }
    }

    .dlw-card__body {
        grid-area: body;
        display: flex;
        flex-direction: column;
        gap: var(--dlw-spacing--tiny);
        padding: var(--dlw-card__body--padding);
    }

    /* Part of body, pushed to bottom */
    .dlw-card__footer {
        --svg-size: 1.5rem;

        color: var(--dlw-color--primary);
        margin: auto 0 0;
        display: flex;
        padding-block: var(--dlw-spacing--tiny) 0;
    }

    /* Part of body, pushed to top */
    .dlw-card__header {
        color: var(--dlw-color--primary);
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-block-end: var(--dlw-spacing--tiny);
    }

    .dlw-card__reading-time {
        --svg-fill: var(--dlw-color--primary);
        --svg-size: 1em;
        font-weight: var(--dlw-font-weight--medium);
        font-size: var(--dlw-font-size--small);
        display: flex;
        gap: var(--dlw-spacing--tiny);
        align-items: center;
    }

    /* Used for links within a hx tag, to enable fully clickable card with useful accessible label */
    .dlw-card__overlay::before {
        content: "";
        inset: 0;
        z-index: 5;
        position: absolute;
    }

    &:focus-within {
        article {
            outline: var(--dlw-a11y--outline-width) solid var(--dlw-color--focus);
            outline-offset: calc(var(--dlw-border-radius, 0) / 2);
            border-radius: calc(var(--dlw-border-radius, 0) / 2);

            a {
                outline: 0;
            }
        }
    }

    &:hover,
    &:focus {
        .dlw-card__footer {
            svg {
                fill: var(--dlw-color--primary-dark--20);
            }
        }
    }
}

[data-dlw-background] .dlw-card {
    --dlw-color--focus: var(--dlw-color--white);
}

/* Web essentials default transitions */
dlw-card,
dlw-internal-resource-card,
dlw-external-resource-card,
.dlw-card {
    .dlw-card__media {
        img,
        video,
        picture {
            transition: transform calc(2 * var(--dlw-transition--duration)) ease;
        }
    }

    @container card (width < 30rem) {
        &:hover,
        &:focus-within {
            img,
            video,
            picture {
                transform: scale(1.05);
            }
        }
    }

    @container card (width >= 30rem) {
        &:hover,
        &:focus-within {
            img,
            video,
            picture {
                transform: scale(1.05);
            }
        }
    }
}
.dlw-card {
    .dlw-card__media {
        img,
        video,
        picture {
            transition: transform calc(2 * var(--dlw-transition--duration)) ease;
        }
    }

    @container card (width < 30rem) {
        &:hover,
        &:focus-within {
            img,
            video,
            picture {
                transform: scale(1.05);
            }
        }
    }

    @container card (width >= 30rem) {
        &:hover,
        &:focus-within {
            img,
            video,
            picture {
                transform: scale(1.05);
            }
        }
    }
}
:root {
    --dlw-collapsible__summary--font-size: 1.25rem;
    --dlw-collapsible--separator: 1px solid currentColor;
}

.dlw-collapsibles {
    display: block;
    container: collapsibles / inline-size;
    background-color: var(--dlw-collapsables--background-color);

    details {
        border: 1px solid var(--dlw-color--border-2);
        border-radius: var(--border-radius--large);
        transition: border-color var(--dlw-transition--duration) ease-out;
        background-color: var(--dlw-collapsible--background-color);

        &:has(:focus-visible) {
            outline: var(--dlw-a11y--outline-width) solid var(--dlw-color--focus);
            outline-offset: calc(var(--border-radius, 0) / 2);
            border-radius: calc(var(--border-radius, 0));

            summary {
                outline: none;
            }
        }
    }

    details[open] {
        box-shadow: var(--dlw-shadow);
        border-color: var(--color--border);
        
        svg {
            transform: rotate(180deg);
        }
    }

    summary {
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        padding: calc(var(--dlw-spacing--small) - var(--border-width, 0px));
        offset-distance: -10px;
        gap: var(--dlw-spacing--small);

        h3 {
            margin: 0;
            text-wrap: unset;
            font-size: var(--dlw-collapsible__summary--font-size);
        }

        svg {
            --svg-size: 1.5rem;
            flex-shrink: 0;
            transition: transform var(--dlw-transition--duration) ease-in-out;
            color: var(--dlw-collapsible--icon-color, var(--dlw-heading--color));
        }
    }

    .dlw-collapsibles__wrapper {
        display: flex;
        flex-direction: column;
        gap: var(--dlw-spacing);
        padding-block-start: var(--dlw-collapsables--padding-block-start);
        padding-block-end: var(--dlw-collapsables--padding-block-end);
    }

    .dlw-collapsibles__items {
        display: grid;
        gap: var(--dlw-spacing);
    }

    .dlw-collapsibles__body {
        padding: calc(var(--dlw-spacing--small) - var(--border-width, 0px));
        padding-block-start: 0;
    }
}
@media(prefers-reduced-motion: no-preference) {
    .dlw-collapsibles {
        @supports(block-size: calc-size(auto, size)) {

            details::details-content {
                display: block;
                block-size: 0;
                overflow: hidden;
                transition-property: block-size, content-visibility;
                transition-duration: var(--dlw-transition--duration);
                transition-behavior: allow-discrete;
            }

            details[open]::details-content {
                /* Fallback for browsers that don't support calc-size() function */
                block-size: auto;

                /* calc-size() function allows transition to height: auto; */
                block-size: calc-size(auto, size);
            }
        }

        /* Fake opening/closing animation by transitioning margin */
        @supports not (block-size: calc-size(auto, size)) {
            summary {
                transition: margin var(--dlw-transition--duration) ease-in-out;
                margin-block-end: 0;
            }

            details[open] summary {
                margin-block-end: var(--dlw-spacing--small);
            }
        }
    }
}
:root {
    --dlw-content-overview--cell--min-width: 250px;
}

.dlw-content-overview {
    display: block;
    container: content-overview / inline-size;
    padding-block: calc(var(--bg-active) * var(--dlw-spacing-cqi, 0px));

    section,
    .dlw-content-overview__head {
        display: flex;
        gap: var(--dlw-spacing);
    }

    section {
        /* Wrapper */
        flex-direction: column;
    }

    .dlw-content-overview__head {
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    h2 {
        margin: 0;
    }

    .dlw-content-overview__items {
        grid-area: items;
    }

    .dlw-content-overview__cta {
        text-align: center;
    }

    ul {
        list-style: none;
        margin: 0;
        padding: 0;

        /* By default we use an implicit grid with items of at least 250px wide */
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(var(--dlw-content-overview--cell--min-width), 1fr));
        gap: var(--dlw-spacing);
    }
}
.dlw-content-overview {
    &[layout="5columns"] {
        --columns: 5;
    }

    &[layout="4columns"] {
        --columns: 4;
    }

    &[layout="3columns"] {
        --columns: 3;
    }

    /* In case a layout is forced via the 'layout' attribute, we use an explicit grid */
    @container content-overview (width > 60rem) {
        &[layout] ul {
            grid-template-columns: repeat(var(--columns), 1fr);
        }
    }
}
.dlw-cta {
    display: var(--cta--display, block);
    container: cta / inline-size;
    color: var(--dlw-cta--text-color);
    --dlw-heading--color: var(--dlw-cta--text-color);
    padding-block-start: var(--dlw-cta--padding-block-start);
    padding-block-end: var(--dlw-cta--padding-block-end);
    
    &:has(.dlw-cta__body) {
        .dlw-cta__wrapper {
            justify-content: space-between;
        }
    }
    
    &[layout=hero]
    {
        .dlw-cta__wrapper {
            padding-block: var(--dlw-spacing--large);
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            gap: var(--dlw-spacing);
        }
    }
    
    &[layout=hero],
    &[layout=condensed] {
        background-color: var(--dlw-cta--background, var(--dlw-color--primary-light--80));
    }
    &[layout=default]
    {
        background-color: var(--dlw-cta--background);
    }

    &[layout=default],
    &[layout=condensed]
    {
        h2 {
            margin: 0;
            --dlw-font-size--h2: var(--font-size);
        }

        .dlw-cta__wrapper {
            padding-block: var(--dlw-spacing--tiny);
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            gap: var(--dlw-spacing) var(--dlw-spacing--large);
        }
        
        .dlw-cta__body {
            flex-grow: 1;
            display: grid;
            grid-template-columns: auto 1fr;
            align-items: center;
            gap: var(--dlw-spacing--small);

            @media (max-width: 37.5rem) {
                grid-template-columns: 1fr;
            }
        }
    }
}
:root {
    --dlw-footer-end--min-height: 4.8125rem;
}

.dlw-footer {
    display: block;
    container: footer / inline-size;

    h2,
    h3,
    .h2,
    .h3 {
        font-size: var(--dlw-font-size--h5);
    }

    ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    p:last-child {
        margin: 0;
    }
}

.dlw-footer-body {
    color: var(--dlw-footer-body--color);
    background: var(--dlw-footer-body--bg);

    --dlw-heading--color: currentColor;
    --dlw-link--color: currentColor;
    --dlw-link--color--visited: currentColor;
    --dlw-link--color--active: currentColor;

    .dlw-footer-body__wrapper {
        display: grid;
        gap: var(--dlw-spacing--large) var(--dlw-spacing--huge);
        padding-block: var(--dlw-spacing);
    }

    .dlw-footer-body__connect {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--dlw-spacing--small) var(--dlw-spacing--large);
    }

    .dlw-footer-body__info {
        display: flex;
        align-items: flex-start;
        align-self: start;
        flex-wrap: wrap;
        gap: var(--dlw-spacing) var(--dlw-spacing--large);
    }

    .dlw-footer-body__logo {
        max-height: 100px;
        max-width: 200px;
        display: flex;

        img {
            max-height: 100%;
            width: auto;
        }
    }

    .dlw-footer-body__description {
        max-width: 50ch;
    }

    .dlw-footer-body__nav {
        display: flex;
        flex-wrap: wrap;
        gap: var(--dlw-spacing) clamp(20px, 5vw, 50px);

        ul {
            display: flex;
            flex-direction: column;
            gap: var(--dlw-spacing--tiny);
        }
    }

    .dlw-footer-body__column {
        flex: 1 1 0;

        h2 a {
            text-decoration: none;
        }
    }

    .dlw-footer-body__end {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-block: var(--dlw-spacing--small);
        width: 100%;

        ul {
            display: flex;
            flex-grow: 1;
            justify-content: flex-end;
            flex-wrap: wrap;
            gap: var(--dlw-spacing--small);
        }

        li a {
            display: inline-block;
            border-radius: 50px;
            background-color: var(--dlw-footer-social--bg, rgba(255, 255, 255, 0.3));
            padding: var(--dlw-spacing--tiny);
            font-size: var(--dlw-font-size--20px);
            display: flex;
            align-items: center;
            justify-content: center;
            width: 45px;
            height: 45px;

            img {
                width: 30px;
                height: auto;
            }

            &:focus,
            &:hover {
                background-color: var(--dlw-color--primary);
            }
        }

        svg {
            color: var(--dlw-footer-body--bg);
        }
    }
}

.dlw-footer-end {
    background: var(--dlw-footer-end--bg);
    color: var(--dlw-footer-end--color);
    padding: var(--dlw-spacing--small) 0;
    min-height: var(--dlw-footer-end--min-height);

    --dlw-heading--color: currentColor;
    --dlw-link--color: currentColor;
    --dlw-link--color--visited: currentColor;
    --dlw-link--color--active: currentColor;

    .dlw-footer-end__wrapper {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: var(--dlw-spacing--tiny) var(--dlw-spacing);
        align-items: center;
    }

    .dlw-footer-end__section {
        justify-content: space-between;
    }

    .dlw-footer-end__section,
    .dlw-footer-end__section ul {
        flex-grow: 1;
        display: flex;
        flex-wrap: wrap;
        gap: 0 var(--dlw-spacing--small);
    }

    @container footer (width > 40rem) {
        .dlw-footer-end__section ul {
            justify-content: flex-end;
        }
    }

    a {
        display: inline-block;
        padding: var(--dlw-spacing--tiny) 0;
    }
}

@container footer (width < 60rem) {
    footer {
        font-size: var(--dlw-font-size--small);

        h2,
        h3,
        .h2,
        .h3 {
            font-size: var(--dlw-font-size);
        }
    }

    .dlw-footer-body__wrapper {
        grid-template-columns: 1fr;
    }

    .dlw-footer-body__connect {
        justify-content: space-between;
    }
}

@container footer (width < 40rem) {
    .dlw-footer-body__nav {
        flex-direction: column;
    }
}

@container footer (width >=60rem) {
    .dlw-footer-body__wrapper {
        grid-template-columns: repeat(12, 1fr);
    }

    .dlw-footer-body__connect {
        grid-row: 1;
        grid-column: span 6;
        justify-self: end;
    }

    .dlw-footer-body__info {
        grid-row: 2;
        grid-column: span 5;
    }

    .dlw-footer-body__nav {
        grid-row: 2;
        grid-column: span 7;
    }

    .dlw-footer-body__extra {
        grid-row: 3;
        grid-column: -1/1;
    }
}
.dlw-media {
    display: block;

    &.dlw-media--hide-on-mobile {
        @media (max-width: 40rem) {
            display: none;
        }
    }

    figure {
        height: 100%;
        width: 100%;
    }

    .dlw-media__image-wrapper {
        position: relative;
        height: 100%;
        width: 100%;

        > img,
        > picture,
        > svg,
        > video {
            display: block;
            height: var(--dlw-media--media-height, auto);
            width: 100%;
            object-fit: cover;
            object-position: center center;
        }
    }

    img {
        border-radius: var(--dlw-media--border-radius, var(--dlw-border-radius));
    }

    .dlw-media__video-play-button {

        border-radius: var(--border-radius);
        overflow: hidden;
        position: absolute;
        z-index: 1;
        inset: 0 0 0 0;
        margin: 0;
        padding: 0;
        background: rgba(0, 0, 0, 0.1);
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        --svg-size: 4rem;
        --svg-fill: var(--dlw-color--primary-light--80);
        transition: .2s ease-in-out all;
        
        svg {
            transition: .2s ease-in-out all;
        }
        
        &:hover {
            --svg-size: 4.5rem;
            background: rgba(0, 0, 0, 0.3);
        }
    }
}
:root {
    --dlw-page-intro--min-height: auto;
    --dlw-page-intro--spacing: clamp(var(--dlw-spacing), 2cqi, var(--dlw-spacing--large));
    --dlw-page-intro__body--max-width: 80ch;
}

.dlw-page-intro {
    display: block;
    min-height: var(--dlw-page-intro--min-height);
    position: relative;
    z-index: 0;
    padding-block-start: var(--dlw-page-intro--padding-block-start);
    padding-block-end: var(--dlw-page-intro--padding-block-end, var(--dlw-page-intro--bottom-space));
    margin-block-end: var(--dlw-page-intro--bottom-margin, var(--spacing--large));
    background: var(--dlw-page-intro--background, transparent);
    clip-path: var(--dlw-page-intro--clip-path, none);
}

/* 
    The side by side variant is used on both horizons and rightsteps, 
    which are the websites we were expected to base the view on. 
    Problem is that on the other websites the layout does not match that concept.
    That is why this overwrite part is added unstead of a refactor.
*/
.dlw-page-intro {
    --dlw-page-intro__body--color: var(--dlw-color--text);
    --dlw-heading--color: var(--dlw-color--text);
    --dlw-wrapper--gutter: 0;

    .dlw-page-intro__body {
        display: grid;
        gap: var(--dlw-spacing--large);
        align-items: center;

        margin-inline: auto;
        padding-inline: var(--spacing);
        max-width: calc(var(--wrapper-width));

        @media (min-width: 40rem) {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    .dlw-page-intro__background {
        position: absolute;
        inset: 0;
        z-index: 1;
        overflow: hidden;
        
        picture,
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
    
    .dlw-page-intro__media {
        position: relative;
        z-index: 2;
        
        @media not (min-width: 40rem) {
            position: relative;
            order: 0;
        }
        
    }
    
    .dlw-page-intro__text {
        z-index: 2;
        padding-block: 0;
        height: 100%;
        display: flex;
        flex-direction: column;
        gap: var(--dlw-spacing--small);
        justify-content: center;
    }
}
/* End of temp overwrite */

.dlw-page-intro__text-labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dlw-page-intro__categories {
    display: flex;
    gap: var(--dlw-spacing--tiny);
    align-items: center;
}

.dlw-page-intro__reading-time {
    --svg-fill: var(--color--text);
    --svg-size: 1.5em;
    font-weight: var(--dlw-font-weight--medium);
    font-size: var(--dlw-font-size--h6);
    display: flex;
    gap: var(--dlw-spacing--tiny);
    align-items: center;
}

.dlw-page-intro__sub-header {
    font-weight: var(--dlw-font-weight--medium);
    font-size: var(--dlw-font-size--h6);
    color: var(--color--text);

}

.dlw-page-intro__wrapper {
    display: flex;
    flex-direction: column;
    reading-flow: flex-visual;
}

.dlw-page-intro__body {
    position: relative;
}

.dlw-page-intro__text {
    padding-block: var(--dlw-page-intro--spacing);
}

.dlw-page-intro__description,
.dlw-page-intro__body h1 {
    width: min(var(--dlw-page-intro__body--max-width), 100%);
}

.dlw-page-intro__body h1 {
    color: var(--dlw-page-intro__h1--color);
}

.dlw-page-intro__description {
    color: var(--dlw-page-intro__description--color);
}

.dlw-page-intro__cta {
    margin-block-start: var(--dlw-spacing--small);
}

.dlw-page-intro__media {

    picture,
    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: var(--dlw-page-intro__media--border-radius);
    }

    img {
        object-position: center;
    }
}


@media not (min-width: 40rem) {
    .dlw-page-intro {
        background: var(--dlw-page-intro--background-mobile, none);
    }

    .dlw-page-intro__body {
        display: flex;
        flex-direction: column;
    }

    .dlw-page-intro__media {
        position: static;
        order: -1;
        margin-inline: calc(-1 * var(--dlw-wrapper--gutter, var(--dlw-spacing)));
    }
}

/* Image is behind text, so we need different text color and focus styles */
@media (min-width: 40rem) {
    .dlw-page-intro {

        /* Default mask */
        &[mask] .dlw-page-intro__body::before {
            content: "";
            position: absolute;
            z-index: 1;
            inset: 0;
            background: linear-gradient(90deg, var(--dlw-color--text) 0%, rgba(0, 0, 0, 0.1) 75%);
            mix-blend-mode: darken;
        }
    }

    .dlw-page-intro__wrapper {
        flex-direction: column-reverse;
    }

    .dlw-page-intro__body {
        :is(a, button):not(:disabled) {
            --dlw-color--focus: var(--dlw-page-intro__body--color);
        }

        padding-block: var(--dlw-spacing);
        color: var(--dlw-page-intro__body--color);

        --dlw-color--focus: currentColor;
        --dlw-heading--color: currentColor;
        --dlw-link--color: currentColor;
        --dlw-link--color--visited: currentColor;
        --dlw-link--color--active: currentColor;
    }

    .dlw-page-intro__text {
        position: relative;
        z-index: 1;
    }

    .dlw-page-intro__media {
        position: absolute;
        inset: 0;
        z-index: 0;
    }
}
:root {
    --dlw-quote__icon--size: clamp(1.5rem, 2.5cqw, 2rem);
    --dlw-quote__icon--color: var(--dlw-color--primary);
}

.dlw-quote {
    --image-size: 130px;

    display: block;
    position: relative;
    container: quote / inline-size;
    padding-block-start: var(--dlw-quote--padding-block-start);
    padding-block-end: var(--dlw-quote--padding-block-end);
    background-color: var(--dlw-quote--bg-color);

    &:has(.dlw-quote__media) {
        .dlw-quote__wrapper {
            gap: var(--dlw-spacing--small) var(--dlw-spacing);
            grid-template-areas: "icon blockquote blockquote icon-close" "icon media figcaption icon-close";
            grid-template-columns: auto 100px 1fr auto;
        }
    }

    &.dlw-quote--prominent:has(.dlw-quote__media) {

        @container quote (width > 50rem) {
            .dlw-quote__wrapper {
                gap: var(--dlw-spacing--tiny) var(--dlw-spacing);
                grid-template-areas: "media icon icon-close" "media blockquote icon-close" "media figcaption icon-close";
                grid-template-columns: var(--image-size) 1fr auto;
            }
        }

        &:has(.dlw-quote__media) {
            --image-size: 20rem;

            .dlw-quote__media {
                border-radius: var(--border-radius);

                img {
                    border-radius: var(--border-radius);
                }
            }
        }
    }

    .dlw-quote__wrapper {
        padding-inline: var(--dlw-wrapper--gutter);
        display: grid;
        align-items: center;
        grid-template-areas: "icon icon icon" "blockquote blockquote icon-close" "figcaption figcaption icon-close";

        @container quote (width < 50rem) {
            grid-template-areas: "icon icon-close" "blockquote blockquote" "figcaption figcaption";
        }

    }

    .dlw-quote__media {
        grid-area: media;
        border-radius: 999px;
        display: flex;
        align-items: center;
        aspect-ratio: 1 / 1;
        overflow: hidden;
    }

    .dlw-quote__icon {
        grid-area: icon;
        align-self: start;

        --svg-size: var(--dlw-quote__icon--size);
        --svg-fill: var(--dlw-quote__icon--color);
    }

    .dlw-quote__icon-close {
        grid-area: icon-close;
        align-self: end;
        justify-self: end;
        transform: rotate(180deg);

        --svg-size: var(--dlw-quote__icon--size);
        --svg-fill: var(--dlw-quote__icon--color);
    }

    figure {
        display: contents;
    }

    blockquote {
        grid-area: blockquote;
        align-self: start;
        color: var(--quote--color, currentColor);
    }

    figcaption {
        grid-area: figcaption;
        padding: var(--dlw-spacing--small) 0;
    }

    blockquote,
    figcaption {
        line-height: 1.2;

        p {
            max-width: 80rem;
        }
    }

    blockquote {
        font-size: clamp(1rem, 4cqw, 2.5rem);
        font-weight: normal;
        text-wrap: balance;
    }

    figcaption {
        font-size: clamp(0.875em, 2cqw, 1rem);
        font-weight: var(--dlw-font-weight--bold, bold);
        font-style: normal;
        text-align: start;
        
        .dlw-quote__author-title {
            font-weight: var(--dlw-font-weight--normal, normal);
        }
    }

    cite {
        font-style: inherit;

        &::before {
            content: "- ";
        }
    }

    figcaption,
    cite {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--dlw-spacing--tiny);
    }

    img {
        object-fit: cover;
        object-position: center;
        aspect-ratio: 1/1;
    }

    @container quote (width < 50rem) {
        &:has(.dlw-quote__media) {
            .dlw-quote__wrapper {
                grid-template-rows: var(--image-size) 1fr auto;
                grid-template-columns: auto 1fr auto;
                grid-template-areas: " icon media icon-close" "blockquote blockquote blockquote" "figcaption figcaption figcaption";
                place-items: center;
                text-align: center;
            }
        }

        .dlw-quote__media {
            max-width: var(--image-size);
        }

        figure,
        blockquote,
        figcaption {
            text-align: center;
            align-items: center;
        }
    }
}

[data-dlw-theme] {
    --dlw-quote__icon--color: var(--dlw-color--white);
}
.dlw-text {
    padding-block-start: var(--dlw-text--padding-block-start) !important;
    padding-block-end: var(--dlw-text--padding-block-end) !important;
    display: block;
    background-color: var(--dlw-text--background-color);
    text-align: var(--dlw-text--text-align);
}
:root {
    --dlw-text-media--gap: clamp(var(--dlw-spacing), 6cqw, var(--dlw-spacing--huge));
}

.dlw-text-media {
    display: block;
    container: text-media / inline-size;
    padding-block-start: var(--dlw-text-media--padding-block-start);
    padding-block-end: var(--dlw-text-media--padding-block-end);
    background-color: var(--dlw-text-media--bg-color);

    &>section {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--dlw-spacing) var(--dlw-text-media--gap);
    }

    .dlw-text-media__body {
        display: flex;
        flex-direction: column;
        gap: var(--dlw-spacing);
        padding: 0;

        p:last-child {
            margin: 0;
        }
    }

    .dlw-text-media__body-wrapper {
        order: 2;
    }

    .dlw-text-media__obj-wrapper img {
        width: 100%;
    }

    @container text-media (width > 50rem) {
        .dlw-text-media__body-wrapper {
            order: 0;
        }

        &[direction="inversed"] {
            .dlw-text-media__body-wrapper {
                order: 2;
                padding-block-start: 0;
            }
        }

        &:not([direction="inversed"]) {
            .dlw-text-media__body-wrapper {
                padding-block-end: 0;
            }
        }

        &>section {
            grid-template-columns: repeat(2, 1fr);
            align-items: center;
        }

        .dlw-text-media__body-wrapper {
            align-self: center;
            padding: 0;
        }

        .dlw-text-media__body {
            padding: 0;
        }
    }
}
:root {
	--dlw-usp__items--gap: var(--dlw-spacing-cqi--small);
	--dlw-usp__items--item--min-width: 21.875rem;
}

.dlw-usp {
	display: block;
	container: usp / inline-size;
	padding-block-start: var(--dlw-usp--padding-block-start);
	padding-block-end: var(--dlw-usp--padding-block-end);
	--dlw-heading--color: var(--dlw-color--text);
	--dlw-link--color: var(--dlw-color--text);
	
	.dlw-usp__wrapper {
		display: flex;
		flex-direction: column;
		gap: var(--dlw-spacing--large) var(--dlw-spacing);
	}
	
	@container usp (width > 50rem) {
		/* If there are more than 4 items, we show the items next to the title, 
		otherwise, the items are shown under the title block. 
		*/
		&:not(:has(.dlw-usp__items>ul>li:nth-child(5))){
			.dlw-usp__wrapper {
				display: grid;
				grid-template-columns: 1fr 3fr;
			}
		}

		/* When it is stacked, the title block should be centered. */
		&:has(.dlw-usp__items>ul>li:nth-child(5)){
			.dlw-usp__body {
				text-align: center;
				
				.c-rich-text {
					display: flex;
					flex-direction: column;
					align-items: center;
				}
			}
		}
	}

	.dlw-usp__items {
		ul {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
			gap: var(--dlw-usp__items--gap);
			list-style: none;
			margin: 0;
			padding: 0;
		}

		li {
			flex: 1 1 auto;
		}
	}
	
	.dlw-usp__description {
		display: flex;
		flex-direction: column;
		gap: var(--dlw-spacing--small);
		margin: 0;
	}
}
:root {
	--dlw-usp-item--media--height: 50px;
}

.dlw-usp-item {
	display: block;
	position: relative;
	height: 100%;
	container: usp-item / inline-size;
	padding: var(--dlw-spacing--small);
	border-radius: var(--dlw-border-radius);
	background-color: var(--dlw-usp-item--background-color, var(--dlw-color--primary-light--95));
	transition: var(--dlw-transition--duration) background-color ease-in-out;
	color: var(--dlw-color--text);
	--dlw-link--color: var(--dlw-color--text);
	--dlw-link--color--visited: var(--dlw-color--text);
	--dlw-link--color--active: var(--dlw-color--text);

	.dlw-usp-item__wrapper {
		display: grid;
		gap: var(--dlw-spacing--tiny) var(--dlw-spacing--small);
		grid-template-columns: auto 1fr;
		grid-template-areas:
			"media title"
			"description description";
	}

	.dlw-usp-item__body {
		display: contents;
	}

	.dlw-usp-item__title {
		grid-area: title;
		display: flex;
		align-items: center;
		margin: 0;
	}
	
	.dlw-usp-item__description {
		grid-area: description;
		margin: 0;
	}

	.dlw-usp-item__media {
		grid-area: media;
	}

	a {
		outline: none;
		text-decoration: none;

		&::before {
			content: "";
			inset: 0;
			position: absolute;
			z-index: 10;
		}
	}

	img,
	picture,
	svg {
		height: var(--dlw-usp-item--media--height);
		width: auto;
	}

	&:focus-within {
		outline: var(--dlw-a11y--outline-width) solid var(--dlw-color--focus);
		outline-offset: calc(var(--dlw-border-radius, 0) / 2);
	}

	&:has(a) {

		:is(&:hover, &:focus, &:focus-within) {
			background-color: var(--dlw-usp-item--background-color-hover, var(--dlw-color--primary-light--90));
		}
	}

	&[layout="secondary"] {
		--dlw-usp-item--background-color-hover: var(--dlw-color--secondary-light--90);
		--dlw-usp-item--background-color: var(--dlw-color--secondary-light--95);
		
		.dlw-usp-item__wrapper {
			position: relative;
			gap: var(--dlw-spacing--small);
			grid-template-areas:
				"title title"
				"description description";
		}

		.dlw-usp-item__media {
			position: absolute;
			inset: 0 0 0 auto;
			--dlw-usp-item--media--height: 100%;
			opacity: .3;
			z-index: 0;
		}

		/* Remove media from grid flow */
		.dlw-usp-item__media {
			grid-area: unset;
		}
	}
}
.dlw-usp {
    .dlw-usp__items {
        li {
            flex: 1 1 var(--dlw-usp__items--item--min-width);
        }
    }

    &[layout] {
        .dlw-usp__items {
            li {
                flex: 0 1 calc(100% / var(--columns, 3) - var(--dlw-usp__items--gap));
            }
        }
    }

    &[layout="4columns"] {
        --columns: 4;
    }

    &[layout="5columns"] {
        --columns: 5;
    }

    @container usp (width < 50rem) {
        & .dlw-usp__items {
            --columns: 2;
        }
    }

    @container usp (width < 30rem) {
        & .dlw-usp__items {
            --columns: 1;
        }
    }
}

/* BREADCRUMB */

/* BUTTON */

/* CARD */

/* COLLAPSIBLES */

/* CONTENT OVERVIEW */

/* CTA */

/* FOOTER */

/* Import header in entry, because scss is not building correctly */
/* HEADER */
/* @import './header/Cta.scss';
@import './header/Doormat.scss';
@import './header/Dropdown.scss';
@import './header/Logo.scss';
@import './header/PrimaryNav.scss';
@import './header/SecondaryNav.scss';
@import './header/Structure.scss';
@import './header/Variables.scss'; */

/* MEDIA */

/* PAGE INTRO */

/* QUOTE */

/* TEXT */

/* TEXT-MEDIA */

/* USP */

.c-article-body {
    display: flex;
    gap: var(--dlw-spacing);

    /* Inside the article body all wrappers should be ingnored. */
    --dlw-wrapper--gutter: 0;
    --dlw-wrapper--width: 100%;

    @media not (min-width: 40rem) {
        flex-direction: column;
    }
}

.c-article-body__content {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--dlw-spacing--large);
}
.c-content-block {

    background-color: var(--content-block--bg-color);
    padding-block-start: var(--content-block--padding-block-start);
    padding-block-end: var(--content-block--padding-block-end);
    
    .c-content-block__content {
        display: flex;
        flex-direction: column;
        gap: var(--dlw-spacing--large);
        background-color: var(--content-block__content--bg-color);
        padding: var(--content-block__content--padding);
        border-radius: var(--border-radius);
    }


    &.c-content-block--grid {
    
        .c-content-block__content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
            gap: var(--dlw-spacing);
            align-items: center;
            justify-content: center;
    
            /* Direct content block children. */
            >div,
            dlw-media {
                height: 100%;
                width: 100%;
            }
    
            /* The media element needs to scale to fit its container inside the grid view. */
            --dlw-media--media-height: 100%;
        }
    }
}
.c-jump-nav {
    display: flex;
    flex-direction: column;
    gap: var(--dlw-spacing--small);
    min-width: 10rem;

    ul {
        display: flex;
        flex-direction: column;
        gap: var(--dlw-spacing--tiny);
    }
    
    ul, li {
        margin: 0;
        padding: 0;
        list-style: none;
    }
}

.c-jump-nav__title {
    font-size: var(--font-size--h4);
    font-weight: var(--font-weight--bold);
    color: var(--dlw-color--text);
    margin: 0;
}

.c-jump-nav__link {
    font-size: var(--font-size--h5);
    font-weight: var(--font-weight--medium);
    color: var(--dlw-color--primary);
}

.c-label {
    background-color: var(--label--bg, var(--dlw-color--primary-light--20));
    color: var(--label--color, var(--dlw-color--primary));
    border: var(--label--border);
    border-radius: var(--label--border-radius, 999px);
    padding: var(--label--padding, var(--dlw-spacing--tiny) var(--dlw-spacing--small));
    display: inline-block;
    margin: 0;
    font-size: var(--label--font-size, var(--font-size--h6));
    line-height: var(--label--line-height);
    font-weight: var(--label--font-weight, var(--dlw-font-weight--bold));
}

.c-label--primary {
    --label--bg: var(--dlw-color--primary-light--95);
    --label--color: var(--dlw-color--primary-dark--20);
    --label--border: 2px solid var(--dlw-color--primary-light--60);
}

.c-label--small {
    --label--padding: 0.1rem var(--spacing--tiny);
    --label--font-size: var(--font-size--small);
    --label--font-weight: var(--font-weight--regular);
}
.c-rich-text, .dlw-text {
    --padding: calc(var(--bg-active, 0) * var(--dlw-spacing-cqi--small));

    display: block;
    padding: var(--dlw-text--padding, var(--padding));

    :where(ol),
    :where(ul),
    :where(p) {
        margin-block-end: 1em;

        &:last-child {
            margin-block-end: 0;
        }
    }

    :where(a) {
        text-decoration: underline;
    }
    
    :where(img) {
        border-radius: var(--dlw-border-radius);
    }

    > p, > h1, > h2, > h3, > h4, > h5, > h6 {
        max-width: 40rem;
    }
}

.dlw-rich-text {
    display: flex;
    flex-direction: column;
    gap: var(--dlw-spacing--large);
    align-items: var(--dlw-rich-text--align-items);
}
.c-page-content {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--spacing--huge);
    min-height: calc(100dvh - var(--dlw-header--height) - var(--dlw-footer-end--min-height));
    background-color: var(--page-content--bg-color);
    padding-block-end: var(--spacing--huge);

    .c-page-content__background-image {
        position: absolute;
        inset: var(--spacing--small);
        z-index: 0;
        overflow: hidden;

        img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            object-position: right bottom;
        }
    }

    &:has(.c-page-content__background-image) {
        
        > :not(.c-page-content__background-image) {
            z-index: 1;
        }
    }
}

.c-page-content--centered {
    justify-content: center;
}
.c-resource-lister {
    display: block;
    container: resource-lister / inline-size;
    padding-block-end: var(--spacing--large);
}

.c-resource-lister__container {
    display: grid;
    gap: var(--spacing--large);
}

@container resource-lister (width > 50rem) {
    .c-resource-lister__container {
        grid-template-columns: minmax(15.625rem, 21.875rem) 1fr;
    }
}

.c-resource-lister__filters {
    
    @container resource-lister (width > 50rem) {
        display: flex;
        flex-direction: column;
        gap: var(--spacing--tiny);
    }
    
    @container resource-lister (width < 50rem) {
        display: grid;
        gap: var(--spacing--tiny);
        gap: var(--spacing--tiny);
        grid-template-areas: 
            "searchbox refinements"
            "stats stats"
            "current-refinements current-refinements";
        
        .c-resource-lister__searchbox {
              grid-area: searchbox;
        }
        .c-resource-lister__stats {
              grid-area: stats;
        }
        .c-resource-lister__current-refinements {
              grid-area: current-refinements;
        }
        .c-resource-lister__refinements-container {
              grid-area: refinements;
        }

        /* On small devices, the filters are shown full screen. */
        .c-resource-lister__widgets {
            position: fixed;
            inset: 0 auto 0 0;
            padding: calc(var(--spacing) + var(--dlw-header--height)) var(--dlw-spacing) var(--dlw-spacing);
            z-index: 100;
            overflow: auto;
            background-color: var(--dlw-color--primary-light--95);
        }
    }
}

dlw-reveal.c-resource-lister__refinements-container>button {
    font-size: var(--font-size--large);
    font-weight: var(--font-weight--medium);
    text-transform: uppercase;
    color: var(--color--primary);
    border: 2px solid var(--color--primary);
    border-radius: var(--border-radius);
    width: fit-content;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--spacing--tiny);
    max-width: 100%;
    background-color: white;
    height: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;

    &:hover,
    &:focus {
        background-color: var(--dlw-color--primary-light--95);
        text-decoration: none;
    }

    svg {
        --svg-size: 1.25rem;
        flex-shrink: 0;
        transition: transform var(--dlw-transition--duration) ease-in-out;
        color: var(--color--primary);
    }
}

@container resource-lister (width > 50rem) {
    dlw-reveal.c-resource-lister__refinements-container {

        [slot="trigger"] {
            display: none;
        }

        [slot="content"] {
            display: block;
        }
    }
}


.c-resource-lister__hits {
    flex: 1;
    
    /* Algolia hits container */
    ol:first-of-type {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(15.625rem, 1fr));
        gap: var(--spacing--large);
        
        >li {
            width: 100%;
            border: none;
            padding: 0;
            box-shadow: none;
            --dlw-card--width: 100%;
            
            &:first-child {
                grid-column: 1 / -1;
            }
        }
    }
}

.c-resource-lister__pagination {
    display: flex;
    justify-content: center;
    margin-block-start: var(--spacing--large);

    .ais-Pagination-link,
    .ais-Pagination-link:hover {
        border: none;
        background-image: none !important;
        box-shadow: none;
    }
    a.ais-Pagination-link:hover {
        background-color: var(--dlw-color--primary-light--95);
    }

    .ais-Pagination-item--selected .ais-Pagination-link {
        box-shadow: none;
        border-block-end: 1px solid var(--color--border);
    }
}

.c-resource-lister__current-refinements {
    min-height: 2rem;

    &:not(:has(li)) {
        display: none;
    }

    ul:first-of-type {
        display: flex;
        gap: var(--spacing--tiny);
        flex-wrap: wrap;


        >li {
            display: flex;
            gap: var(--spacing--tiny);
            flex-wrap: wrap;

            /* The label inside an active refinement is targeted with this class in Algolia generated html. */
            .ais-CurrentRefinements-categoryLabel {
                white-space: nowrap;
            }
        }
    }
}

/* 
    Only one category label exists, so we hide it. 
    It also has a technical label, and not a user friendly one.
    If refinements becomes more complex in the future, and better labels are added, 
    we can style it here.
*/
.c-resource-lister__refinement-label {
    display: none;
}

.c-resource-lister__widgets {

    padding-block-start: var(--spacing--small);

    /* Algolia html structure: .ais-Panel > .ais-Panel-header, .ais-Panel-body */
    .ais-Panel {
        display: flex;
        flex-direction: column;
        gap: var(--spacing--small);

        /* Hide this panel if there are not items selectable */
        &:not(:has(.ais-RefinementList-item:not(.ais-RefinementList-item--selected))) {
            display: none;
        }
    }

    .ais-Panel-header {
        font-size: var(--font-size--h5);
        text-transform: initial;
        margin: 0;
        color: var(--color--text);
    }

    .ais-Panel-body {
        display: flex;
        flex-direction: column;
        gap: var(--spacing--tiny);
    }

    .ais-RefinementList {
        padding-inline-start: var(--spacing--small);
    }

    .ais-RefinementList-item {
        text-transform: initial;
        margin: 0;

        &:hover {
            cursor: pointer;
        }

        >div {
            display: flex;
            gap: var(--spacing--tiny);

            >strong {
                font-weight: var(--font-weight--regular);
                font-size: var(--font-size);
                color: var(--color--text);
            }

            >span {
                font-weight: var(--font-weight--regular);
                font-size: var(--font-size);
                color: var(--color--primary-light--20);
            }
        }
    }
}

/* Alglia overwrites in the resource lister. */
.c-resource-lister {

    .ais-SearchBox-input {
        border: var(--ais-searchbox--border, 2px solid var(--color--primary));
        border-radius: var(--ais-searchbox--border-radius, var(--border-radius));
        padding: var(--spacing--tiny) var(--spacing--small) var(--spacing--tiny) var(--spacing);
        font-size: var(--font-size);
        box-shadow: var(--ais-searchbox--border, var(--dlw-shadow));
        min-width: var(--ais-searchbox--min-width, 21.875rem);
    }

    .ais-CurrentRefinements-item {
        border: none;
        padding: 0;
        background: none;
    }

    .ais-CurrentRefinements-label {
        font-weight: var(--font-weight--medium);
    }

    .ais-CurrentRefinements-category {
        display: flex;
        gap: var(--spacing--tiny);
        align-items: center;
        justify-content: center;
        background-color: #E7E7E7;
        border: 1px solid #5D5D5D;
        color: #5D5D5D;
        border-radius: 6rem;
        padding: 0 var(--spacing--tiny);
        margin: 0;
    }

    .ais-CurrentRefinements-delete {
        color: #5D5D5D;
        font-size: var(--font-size--small);
    }

    .ais-RefinementList-showMore {
        border: var(--ais-showMore--border, var(--dlw-button--secondary--border));
        border-radius: var(--ais-showMore--border-radius, var(--dlw-button--border-radius, 999px));
        padding: var(--dlw-spacing--tiny) var(--dlw-spacing--small);
        line-height: 1;
        font-weight: var(--font-weight--bold);
        color: var(--dlw-button--secondary--color);
        font-size: var(--font-size);
        background-image: none;
        background-color: var(--dlw-button--secondary--background-color);
        transition: var(--dlw-transition--duration) all;
        min-height: 45px;
        
        &:hover,
        &:focus {
            background: var(--dlw-button--secondary-hover--background-color, color-mix(in srgb, var(--dlw-button--secondary--background-color) 80%, black 20%));
            --dlw-link--color--visited: var(--dlw-button--secondary-hover--background-color, color-mix(in srgb, var(--dlw-button--secondary--background-color) 80%, black 20%));
        }
    }
}
.c-modal {
    margin: auto;
    border-radius: var(--border-radius);
    padding: 0;
    width: 100%;
    overflow: visible;
    max-width: 60rem;
    height: 100%;
    max-height: 33.75rem;

    &::backdrop {
        background-color: rgba(0, 0, 0, 0.6);
    }

    iframe {
        border: none;
        width: 100%;
        height: 100%;
        display: block;
        margin: 0;
    }

    .c-modal__close {
        position: absolute;
        inset: -2.2rem 0 auto auto;
        background: none;
        border: none;
        cursor: pointer;

        svg {
            --svg-size: 1.5rem;
            --svg-fill: white;
        }
    }
}
.c-metrics {
    background-color: var(--metrics--bg-color);
    
    .c-metrics__items {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: var(--dlw-spacing);
        padding-block-start: var(--metrics--padding-block-start);
        padding-block-end: var(--metrics--padding-block-end);
    }
}

.c-metric {
    text-align: center;
    --dlw-heading--color: var(--metric--color);
    
    .c-metric__value-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .c-metric__value {
        display: inline-block;
    }
}

:root {
    --tabs--border-color: var(--dlw-color--primary);
    --tabs--border-width: 5px;
}

.c-tabs {
    container: tabs / inline-size;
    padding-block-start: var(--tabs--padding-top);
    padding-block-end: var(--tabs--padding-end);
}

.c-tabs__container {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing--huge);
    
    @container tabs (min-width: 31.25rem) {
        grid-template-columns: auto 1fr;
        gap: var(--spacing);
    }
}

.c-tabs__nav {
    height: 100%;
    display: flex;
    gap: var(--dlw-spacing--small);
    border-right: var(--dlw-border--default);
    --dlw-tabs__nav--padding: 0 0 var(--dlw-spacing--small);
    min-width: 10rem;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--dlw-color--primary) transparent;
    scroll-snap-type: x mandatory;
    
    @container tabs (min-width: 31.25rem) {
        flex-direction: column;
    }
}

.c-tabs__nav-item {
    font-size: var(--font-size--h4);
    color: var(--color--text);
    font-weight: var(--dlw-font-weight--h4);
    line-height: var(--dlw-line-height--h4);
    padding: var(--spacing--small);
    
    &[aria-selected=true] {
        background-color: var(--tabs--active-color);
    }
    
    @container tabs (max-width: 31.25rem) {
        border-block-end: var(--tabs--border-width) solid color-mix(in srgb, var(--tabs--border-color) 5%, white 80%);
        
        &[aria-selected=true] {
            border-block-end: var(--tabs--border-width) solid var(--tabs--border-color);
        }
    }
    
    @container tabs (min-width: 31.25rem) {
        border-inline-start: var(--tabs--border-width) solid color-mix(in srgb, var(--tabs--border-color) 5%, white 80%);
        
        &[aria-selected=true] {
            border-inline-start: var(--tabs--border-width) solid var(--tabs--border-color);
        }
    }
}

.c-tabs-panel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--dlw-spacing);
}
.c-header-basic {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing--tiny) 0;
    background-color: var(--color--primary);
    text-align: center;
    min-height: var(--dlw-header--height--primary);

    img {
        width: auto;
        height: auto;
        max-height: calc(var(--dlw-header--height--primary) - (var(--dlw-spacing--tiny) * 2));
        max-width: var(--header-logo--max-width, 15rem);
        object-fit: contain;
    }
}

[data-dlw-background="primary"],
[data-dlw-background="secondary"],
[data-dlw-background="dark"] {
    --bg-active: 1;
    --bg-active--color: rgb(255,255,255);

    background-color: var(--bg-active--bg);
    color: var(--bg-active--color);

    --dlw-heading--color: currentColor;    
    --dlw-link--color: currentColor;
    --dlw-link--color--visited: currentColor;
    --dlw-link--color--active: currentColor;
    
    /* Border colors, from dark to lighter */
    --dlw-color--border: var(--bg-active--color);
    --dlw-color--border-1: color-mix(in srgb, var(--dlw-color--border) 50%, var(--dlw-color--transparency) 50%);
    --dlw-color--border-2: color-mix(in srgb, var(--dlw-color--border) 60%, var(--dlw-color--transparency) 40%);
    --dlw-color--border-3: color-mix(in srgb, var(--dlw-color--border) 70%, var(--dlw-color--transparency) 30%);
    --dlw-color--border-4: color-mix(in srgb, var(--dlw-color--border) 80%, var(--dlw-color--transparency) 20%);
    --dlw-color--border-5: color-mix(in srgb, var(--dlw-color--border) 90%, var(--dlw-color--transparency) 10%);
}

[data-dlw-background="primary"] {
    --bg-active--bg: var(--dlw-color-bg--primary);
}

[data-dlw-background="secondary"] {
    --bg-active--bg: var(--dlw-color-bg--secondary);
}

[data-dlw-background="dark"] {
    --bg-active--bg: var(--dlw-color--text);

}

[data-dlw-spacing] {
    margin-block-end: var(--dlw-spacing--large);
}
.u-visually-hidden {
    position: absolute;
    margin: -1px;
    border: 0;
    padding: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
}
/* Because there is no sass and this is a generic rule, the page content logic is added in this class. */
.c-page-content >.c-rich-text,
.dlw-wrapper {
    max-width: var(--dlw-wrapper--width, 100%);
    margin-inline: auto;
    width: 100%;
    padding-inline: var(--dlw-wrapper--gutter, 0);

    & & {
        --dlw-wrapper--gutter: 0;
    }
}




.dlw-header-cta{display:flex;justify-content:center;align-items:center;padding:var(--dlw-spacing--small);aspect-ratio:1/1;flex-shrink:0;--svg-size: 2rem}.dlw-header-cta:focus-visible{outline-offset:-3px;outline-color:var(--dlw-color--primary)}.dlw-header-cta:focus,.dlw-header-cta:hover{background:var(--dlw-color--primary-light--80)}:root{--dlw-mq--header: (min-width: 65rem);--dlw-mq--until-header: not (min-width: 65rem);--dlw-header--height: 60px;--dlw-header--background: white;--dlw-header--wrapped: calc((100dvw - var(--dlw-wrapper--width)) / 2);--dlw-header--gta: ". logo cta .";--dlw-header--gtc: var(--dlw-header--wrapped) var(--dlw-header__logo--width) 1fr var(--dlw-header--wrapped);--dlw-header__logo--width: 100px;--dlw-header__secondary--background: var(--dlw-color--text)}@media(min-width: 65rem){:root{--dlw-header--height--primary: 70px;--dlw-header--height--secondary: 0px;--dlw-header--height: calc(var(--dlw-header--height--primary, 0px) + var(--dlw-header--height--secondary, 0px));--dlw-header__logo--width: 150px;--dlw-header--gta: ". logo primary-nav cta .";--dlw-header--gtc: var(--dlw-header--wrapped) var(--dlw-header__logo--width) 1fr auto var(--dlw-header--wrapped);--dlw-header--gtr: var(--dlw-header--height--primary)}:root .dlw-header:has(.dlw-header__secondary){--dlw-header--height--secondary: 30px;--dlw-header--gta: ". secondary-nav secondary-nav secondary-nav ." ". logo primary-nav cta .";--dlw-header--gtc: var(--dlw-header--wrapped) var(--dlw-header__logo--width) 1fr auto var(--dlw-header--wrapped);--dlw-header--gtr: var(--dlw-header--height--secondary) var(--dlw-header--height--primary)}}.dlw-doormat{border:none;padding:0;background:var(--dlw-header--background)}.dlw-doormat__wrapper{container:doormat/inline-size}.dlw-doormat__content{border-radius:var(--dlw-border-radius)}.dlw-doormat__title,.dlw-doormat__subtitle{font-weight:var(--dlw-font-weight--bold)}.dlw-doormat__subtitle{font-size:1.125rem;text-decoration:none;color:var(--dlw-color--text);display:block;padding:2px 0}.dlw-doormat__items a{display:inline-block;padding:var(--dlw-spacing--small) 0}.dlw-doormat__nav ul{display:flex;flex-direction:column;gap:var(--dlw-spacing--small)}.dlw-doormat__nav li{display:flex;gap:var(--dlw-spacing--small);align-items:center;padding-inline:var(--dlw-spacing)}.dlw-doormat__nav li a{padding:2px 0;display:inline-block;--dlw-link--text-decoration: none;color:var(--primary-nav-item--color)}.dlw-doormat__nav li a:hover{color:var(--primary-nav-item--color--hover)}.dlw-doormat__nav li img{height:1.5em;width:auto}@media not (min-width: 65rem){.dlw-doormat{border-block-start:1px solid var(--dlw-color--border-1);inset:var(--dlw-header--height) 0 auto 0;height:calc(100dvh - var(--dlw-header--height));width:100%;overscroll-behavior:contain}.dlw-doormat__nav ul{gap:0}.dlw-doormat__nav li{padding:var(--dlw-spacing--small) 0;border-block-start:1px solid var(--dlw-color--border-1)}.dlw-doormat__back{display:flex;align-items:center;gap:var(--dlw-spacing--small)}.dlw-doormat__wrapper{padding:var(--dlw-wrapper--gutter, var(--dlw-spacing))}.dlw-doormat__title{font-size:1.5rem;font-weight:var(--dlw-font-weight--bold)}.dlw-doormat__wrapper,.dlw-doormat__body{display:flex;flex-direction:column;gap:var(--dlw-spacing--small)}.dlw-doormat__block{margin:0 0 var(--dlw-spacing--small)}}@media(min-width: 65rem){.dlw-doormat{display:none;border-radius:var(--dlw-border-radius);min-width:350px;max-height:calc(100dvh - var(--dlw-header--height))}.dlw-doormat:has(.dlw-doormat__content){width:100%;--dlw-doormat--left: 0;--dlw-doormat--right: 0}.dlw-doormat:has(.dlw-doormat__content) .dlw-doormat__wrapper{padding-inline:0;display:grid;grid-template-columns:var(--dlw-header--wrapped) 1fr var(--dlw-header--wrapped);gap:var(--dlw-wrapper--gutter, var(--dlw-spacing))}.dlw-doormat:has(.dlw-doormat__content) .dlw-doormat__body{grid-column:2;display:grid;grid-template-columns:3fr 1fr;grid-template-rows:auto 1fr auto;align-items:start;gap:var(--dlw-spacing--small) var(--dlw-spacing-cqi)}.dlw-doormat:popover-open{border:none;display:block;box-shadow:var(--dlw-doormat--shadow, var(--dlw-shadow))}@supports(position-anchor: --primary-nav-item-1){.dlw-doormat:popover-open{top:anchor(bottom);left:anchor(var(--dlw-doormat--left, left));right:anchor(var(--dlw-doormat--right, auto))}}@supports not (position-anchor: --primary-nav-item-1){.dlw-doormat:popover-open{--right: calc(var(--anchor--x) + var(--anchor--width));top:calc(var(--anchor--y) + var(--anchor--height));left:var(--dlw-doormat--left, calc(100dvw - var(--left)));right:var(--dlw-doormat--right, auto)}}.dlw-doormat[secondary]{background-color:var(--dlw-header__secondary--background);min-width:200px}.dlw-doormat[secondary] .dlw-doormat__body,.dlw-doormat[secondary] .dlw-doormat__wrapper{padding:0}.dlw-doormat[secondary] .dlw-doormat__body{display:block}.dlw-doormat__wrapper{padding:var(--dlw-spacing--small) 0}.dlw-doormat__back{display:none}.dlw-doormat__title{grid-column:1;grid-row:1;font-size:2rem}.dlw-doormat__nav{grid-column:1;grid-row:2;display:grid;grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));gap:var(--dlw-spacing-cqi)}.dlw-doormat__content{grid-row:1/-1;grid-column:2;display:flex;flex-direction:column;gap:var(--dlw-spacing--small);min-width:300px;background:var(--dlw-color--grey-1);padding:var(--dlw-spacing);border-radius:var(--dlw-border-radius);position:relative}.dlw-doormat__block{flex:1 1 0}.dlw-doormat__cta{grid-row:3}}:root{--dlw-mq--header: (min-width: 65rem);--dlw-mq--until-header: not (min-width: 65rem);--dlw-header--height: 60px;--dlw-header--background: white;--dlw-header--wrapped: calc((100dvw - var(--dlw-wrapper--width)) / 2);--dlw-header--gta: ". logo cta .";--dlw-header--gtc: var(--dlw-header--wrapped) var(--dlw-header__logo--width) 1fr var(--dlw-header--wrapped);--dlw-header__logo--width: 100px;--dlw-header__secondary--background: var(--dlw-color--text)}@media(min-width: 65rem){:root{--dlw-header--height--primary: 70px;--dlw-header--height--secondary: 0px;--dlw-header--height: calc(var(--dlw-header--height--primary, 0px) + var(--dlw-header--height--secondary, 0px));--dlw-header__logo--width: 150px;--dlw-header--gta: ". logo primary-nav cta .";--dlw-header--gtc: var(--dlw-header--wrapped) var(--dlw-header__logo--width) 1fr auto var(--dlw-header--wrapped);--dlw-header--gtr: var(--dlw-header--height--primary)}:root .dlw-header:has(.dlw-header__secondary){--dlw-header--height--secondary: 30px;--dlw-header--gta: ". secondary-nav secondary-nav secondary-nav ." ". logo primary-nav cta .";--dlw-header--gtc: var(--dlw-header--wrapped) var(--dlw-header__logo--width) 1fr auto var(--dlw-header--wrapped);--dlw-header--gtr: var(--dlw-header--height--secondary) var(--dlw-header--height--primary)}}@media(min-width: 65rem){.dlw-header-dropdown ul{flex-direction:column;justify-content:start;justify-self:stretch;align-items:stretch;gap:0}.dlw-header-dropdown a{padding:var(--dlw-spacing--small);text-decoration:none;display:block;color:#fff;outline-offset:-3px}.dlw-header-dropdown a:focus,.dlw-header-dropdown a:hover{background:var(--dlw-color--grey-5)}}.dlw-header-logo{display:flex;align-items:center}.dlw-header-logo svg,.dlw-header-logo img{max-width:100%;max-height:var(--dlw-header--height--primary, calc(var(--dlw-header--height) - var(--spacing--tiny) * 2), auto);width:auto;padding-block:var(--spacing--tiny)}.dlw-header-logo svg{max-width:var(--dlw-header-logo--max-width, 100%)}.dlw-header-logo a{display:flex;align-items:center;justify-content:center;height:100%}:root{--dlw-mq--header: (min-width: 65rem);--dlw-mq--until-header: not (min-width: 65rem);--dlw-header--height: 60px;--dlw-header--background: white;--dlw-header--wrapped: calc((100dvw - var(--dlw-wrapper--width)) / 2);--dlw-header--gta: ". logo cta .";--dlw-header--gtc: var(--dlw-header--wrapped) var(--dlw-header__logo--width) 1fr var(--dlw-header--wrapped);--dlw-header__logo--width: 100px;--dlw-header__secondary--background: var(--dlw-color--text)}@media(min-width: 65rem){:root{--dlw-header--height--primary: 70px;--dlw-header--height--secondary: 0px;--dlw-header--height: calc(var(--dlw-header--height--primary, 0px) + var(--dlw-header--height--secondary, 0px));--dlw-header__logo--width: 150px;--dlw-header--gta: ". logo primary-nav cta .";--dlw-header--gtc: var(--dlw-header--wrapped) var(--dlw-header__logo--width) 1fr auto var(--dlw-header--wrapped);--dlw-header--gtr: var(--dlw-header--height--primary)}:root .dlw-header:has(.dlw-header__secondary){--dlw-header--height--secondary: 30px;--dlw-header--gta: ". secondary-nav secondary-nav secondary-nav ." ". logo primary-nav cta .";--dlw-header--gtc: var(--dlw-header--wrapped) var(--dlw-header__logo--width) 1fr auto var(--dlw-header--wrapped);--dlw-header--gtr: var(--dlw-header--height--secondary) var(--dlw-header--height--primary)}}.dlw-primary-nav__items{display:flex;flex-direction:column}@media(min-width: 65rem){.dlw-primary-nav__items{flex-direction:row;height:100%}}.dlw-primary-nav-item{height:100%}.dlw-primary-nav-item svg{fill:var(--dlw-color--primary)}@media not (min-width: 65rem){.dlw-primary-nav-item .dlw-primary-nav-item__cta{display:flex;align-items:center;gap:var(--dlw-spacing--small);padding:var(--dlw-spacing) var(--dlw-wrapper--gutter, var(--dlw-spacing));font-weight:var(--primary-nav-item--font-weight, var(--dlw-font-weight--bold));justify-content:space-between;width:100%;border-block-start:1px solid var(--dlw-color--border-1);text-decoration:none;color:var(--dlw-color--text)}.dlw-primary-nav-item .dlw-primary-nav-item__cta:focus-visible{outline-offset:-3px}.dlw-primary-nav-item .dlw-primary-nav-item__cta svg{transform:rotate(-90deg);fill:var(--primary-nav-item--color, var(--primary-nav-item--color--hover))}.dlw-primary-nav-item .dlw-primary-nav-item__cta[data-header-popover-utils-pointer-events-trigger]:has(+.dlw-primary-nav-item__cta){display:none}}@media(min-width: 65rem){.dlw-primary-nav-item{border:none;flex-shrink:0;display:inline-flex;background:none;margin:0;align-self:stretch}.dlw-primary-nav-item .dlw-primary-nav-item__cta{cursor:pointer;align-self:stretch;display:flex;align-items:center;gap:var(--dlw-spacing--small);font-weight:var(--primary-nav-item--font-weight, var(--dlw-font-weight--bold));text-decoration:none;color:var(--primary-nav-item--color);border-block:5px solid rgba(0,0,0,0);padding-inline:var(--dlw-spacing);height:100%}.dlw-primary-nav-item .dlw-primary-nav-item__cta:focus-visible{outline-offset:-3px;outline-color:var(--dlw-color--primary)}.dlw-primary-nav-item .dlw-primary-nav-item__cta,.dlw-primary-nav-item .dlw-primary-nav-item__cta svg{transition:transform var(--dlw-transition--duration) ease,border var(--dlw-transition--duration) ease,background var(--dlw-transition--duration) ease}.dlw-primary-nav-item .dlw-primary-nav-item__cta[data-header-popover-utils-pointer-events-trigger]+.dlw-primary-nav-item__cta .dlw-primary-nav-item__label{display:none}.dlw-primary-nav-item .dlw-primary-nav-item__cta:hover{color:var(--primary-nav-item--color--hover)}.dlw-primary-nav-item .dlw-primary-nav-item__cta[data-header-popover-utils-pointer-events-trigger]:has(+.dlw-primary-nav-item__cta){padding-inline-end:var(--dlw-spacing--tiny)}.dlw-primary-nav-item .dlw-primary-nav-item__cta[data-header-popover-utils-pointer-events-trigger]+.dlw-primary-nav-item__cta{padding-inline-start:var(--dlw-spacing--tiny)}:is(.dlw-primary-nav-item[aria-current=page]){border-block-end:5px solid var(--dlw-color--primary)}.dlw-primary-nav-item:focus-within,.dlw-primary-nav-item:hover{background:var(--dlw-color--primary-light--95)}.dlw-primary-nav-item:has(:popover-open) svg{transform:rotate(180deg)}}:root{--dlw-mq--header: (min-width: 65rem);--dlw-mq--until-header: not (min-width: 65rem);--dlw-header--height: 60px;--dlw-header--background: white;--dlw-header--wrapped: calc((100dvw - var(--dlw-wrapper--width)) / 2);--dlw-header--gta: ". logo cta .";--dlw-header--gtc: var(--dlw-header--wrapped) var(--dlw-header__logo--width) 1fr var(--dlw-header--wrapped);--dlw-header__logo--width: 100px;--dlw-header__secondary--background: var(--dlw-color--text)}@media(min-width: 65rem){:root{--dlw-header--height--primary: 70px;--dlw-header--height--secondary: 0px;--dlw-header--height: calc(var(--dlw-header--height--primary, 0px) + var(--dlw-header--height--secondary, 0px));--dlw-header__logo--width: 150px;--dlw-header--gta: ". logo primary-nav cta .";--dlw-header--gtc: var(--dlw-header--wrapped) var(--dlw-header__logo--width) 1fr auto var(--dlw-header--wrapped);--dlw-header--gtr: var(--dlw-header--height--primary)}:root .dlw-header:has(.dlw-header__secondary){--dlw-header--height--secondary: 30px;--dlw-header--gta: ". secondary-nav secondary-nav secondary-nav ." ". logo primary-nav cta .";--dlw-header--gtc: var(--dlw-header--wrapped) var(--dlw-header__logo--width) 1fr auto var(--dlw-header--wrapped);--dlw-header--gtr: var(--dlw-header--height--secondary) var(--dlw-header--height--primary)}}.dlw-secondary-nav{grid-area:content}.dlw-secondary-nav .dlw-secondary-nav__wrapper{display:flex;flex-direction:column;gap:var(--dlw-spacing--tiny)}.dlw-secondary-nav ul{display:flex;flex-direction:column;grid-area:content;gap:var(--dlw-spacing--tiny)}@media not (min-width: 65rem){.dlw-secondary-nav{padding:var(--dlw-wrapper--gutter, var(--dlw-spacing));background:var(--dlw-color--secondary-light--80)}}@media(min-width: 65rem){.dlw-secondary-nav{color:#fff;align-self:stretch;font-size:var(--dlw-font-size--small);align-items:center;justify-content:end;height:100%;display:flex}.dlw-secondary-nav .dlw-secondary-nav__wrapper,.dlw-secondary-nav ul{display:flex;flex-direction:row;justify-self:end;align-items:center;height:100%}}.dlw-secondary-nav-item{padding:var(--dlw-spacing--tiny) 0;text-underline-offset:.25em;display:flex;align-items:center;gap:var(--dlw-spacing--tiny);color:#fff}.dlw-secondary-nav-item:popover-open svg,.dlw-secondary-nav-item:has(:popover-open) svg{transform:rotate(180deg)}@media not (min-width: 65rem){.dlw-secondary-nav-item{text-decoration:underline;color:var(--dlw-color--text)}.dlw-secondary-nav-item svg{transform:rotate(-90deg)}}@media(min-width: 65rem){.dlw-secondary-nav-item{text-decoration:none;padding:0 var(--dlw-spacing--tiny)}.dlw-secondary-nav-item:hover,.dlw-secondary-nav-item:focus{color:#fff}.dlw-secondary-nav-item:focus-visible{outline-offset:0px;text-decoration:none}}:root{--dlw-mq--header: (min-width: 65rem);--dlw-mq--until-header: not (min-width: 65rem);--dlw-header--height: 60px;--dlw-header--background: white;--dlw-header--wrapped: calc((100dvw - var(--dlw-wrapper--width)) / 2);--dlw-header--gta: ". logo cta .";--dlw-header--gtc: var(--dlw-header--wrapped) var(--dlw-header__logo--width) 1fr var(--dlw-header--wrapped);--dlw-header__logo--width: 100px;--dlw-header__secondary--background: var(--dlw-color--text)}@media(min-width: 65rem){:root{--dlw-header--height--primary: 70px;--dlw-header--height--secondary: 0px;--dlw-header--height: calc(var(--dlw-header--height--primary, 0px) + var(--dlw-header--height--secondary, 0px));--dlw-header__logo--width: 150px;--dlw-header--gta: ". logo primary-nav cta .";--dlw-header--gtc: var(--dlw-header--wrapped) var(--dlw-header__logo--width) 1fr auto var(--dlw-header--wrapped);--dlw-header--gtr: var(--dlw-header--height--primary)}:root .dlw-header:has(.dlw-header__secondary){--dlw-header--height--secondary: 30px;--dlw-header--gta: ". secondary-nav secondary-nav secondary-nav ." ". logo primary-nav cta .";--dlw-header--gtc: var(--dlw-header--wrapped) var(--dlw-header__logo--width) 1fr auto var(--dlw-header--wrapped);--dlw-header--gtr: var(--dlw-header--height--secondary) var(--dlw-header--height--primary)}}.dlw-header{display:block;background:var(--dlw-header--background);box-shadow:var(--dlw-shadow)}.dlw-header :where(header,nav){display:grid;gap:0 var(--dlw-wrapper--gutter, var(--dlw-spacing));grid-template-areas:var(--dlw-header--gta);grid-template-columns:var(--dlw-header--gtc);grid-template-rows:var(--dlw-header--gtr, auto);height:var(--dlw-header--height)}.dlw-header :where(button){border:none;margin:0;background:none;padding:0;cursor:pointer;color:currentColor}.dlw-header :where(nav){grid-column:1/-1;grid-row:1/-1}.dlw-header :where(ul){margin:0;padding:0;list-style:none}@media(min-height: 36rem){.dlw-header{position:sticky;top:0;z-index:1000}}@media not (min-width: 65rem){.dlw-header .dlw-header__nav{border:none;inset:var(--dlw-header--height) 0 0 0;width:100%;padding:0;overflow:visible}.dlw-header .dlw-header__nav:not(:popover-open){display:none}body:has(.dlw-header .dlw-header__nav:popover-open){overflow:hidden}.dlw-header .dlw-header__mobile{margin-inline-end:calc(-1*var(--dlw-wrapper--gutter));justify-content:end;gap:var(--dlw-spacing--tiny)}.dlw-header .dlw-header__desktop{display:none}.dlw-header .dlw-header__close-nav{position:absolute;right:0;top:calc(-1*var(--dlw-header--height))}.dlw-header .dlw-header__open-nav,.dlw-header .dlw-header__close-nav{height:var(--dlw-header--height);width:var(--dlw-header--height);background:var(--dlw-header--background)}.dlw-header .dlw-header__nav-inner{height:calc(100dvh - var(--dlw-header--height));overflow:auto}}@media(min-width: 65rem){.dlw-header :where(header,nav){grid-template-areas:var(--dlw-header--gta);grid-template-columns:var(--dlw-header--gtc)}.dlw-header .dlw-header__nav,.dlw-header .dlw-header__nav-inner{display:contents}.dlw-header .dlw-header__open-nav,.dlw-header .dlw-header__close-nav,.dlw-header .dlw-header__mobile{display:none}.dlw-header .dlw-header__desktop{display:flex}.dlw-header .dlw-primary-nav ul{flex-direction:row}.dlw-header .dlw-header__primary{align-items:stretch;display:flex;margin-inline-end:calc(-1*var(--dlw-wrapper--gutter))}.dlw-header .dlw-header__secondary{grid-area:secondary-nav;grid-column:1/-1;display:grid;grid-template-columns:var(--dlw-header--gtc);grid-template-areas:". content content content .";gap:0 var(--dlw-wrapper--gutter, var(--dlw-spacing));background:var(--dlw-header__secondary--background)}}.dlw-header__logo{grid-area:logo;align-self:center;z-index:10}.dlw-header__primary{grid-area:primary-nav}.dlw-header__secondary{grid-area:secondary-nav}.dlw-header__cta{grid-area:cta;display:flex}dlw-header-placeholder{display:contents}:root{--dlw-mq--header: (min-width: 65rem);--dlw-mq--until-header: not (min-width: 65rem);--dlw-header--height: 60px;--dlw-header--background: white;--dlw-header--wrapped: calc((100dvw - var(--dlw-wrapper--width)) / 2);--dlw-header--gta: ". logo cta .";--dlw-header--gtc: var(--dlw-header--wrapped) var(--dlw-header__logo--width) 1fr var(--dlw-header--wrapped);--dlw-header__logo--width: 100px;--dlw-header__secondary--background: var(--dlw-color--text)}@media(min-width: 65rem){:root{--dlw-header--height--primary: 70px;--dlw-header--height--secondary: 0px;--dlw-header--height: calc(var(--dlw-header--height--primary, 0px) + var(--dlw-header--height--secondary, 0px));--dlw-header__logo--width: 150px;--dlw-header--gta: ". logo primary-nav cta .";--dlw-header--gtc: var(--dlw-header--wrapped) var(--dlw-header__logo--width) 1fr auto var(--dlw-header--wrapped);--dlw-header--gtr: var(--dlw-header--height--primary)}:root .dlw-header:has(.dlw-header__secondary){--dlw-header--height--secondary: 30px;--dlw-header--gta: ". secondary-nav secondary-nav secondary-nav ." ". logo primary-nav cta .";--dlw-header--gtc: var(--dlw-header--wrapped) var(--dlw-header__logo--width) 1fr auto var(--dlw-header--wrapped);--dlw-header--gtr: var(--dlw-header--height--secondary) var(--dlw-header--height--primary)}}
body {
    font-family: "Asap", sans-serif;
    font-optical-sizing: auto;
}

:root,
[data-dlw-background],
[data-theme-light] {
    --dlw-transition--duration: 0.2s;

    /* Or use  */
    --color--primary: rgb(181, 1, 86);
    --color--secondary: rgb(190, 213, 0);
    --color--text: rgb(29, 29, 29);

    --wrapper-width: 75rem;

    /* Border colors, from lighter to dark */
    --color--border: var(--color--secondary);
    --dlw-header-logo--max-width: 180px;
    --dlw-page-intro--min-height: 300px;
    --dlw-border-radius: 1.5rem;
    --dlw-shadow: none;

    --font-family--primary: "Asap", Helvetica, Arial, sans-serif;

    /* font sizes */
    --font-size: 1rem;
    --font-size--h1: 3rem;
    --font-size--h2: 2rem;
    --font-size--h3: 1.563rem;
    --font-size--h4: 1.375rem;
    --font-size--h5: 1.25rem;
    --font-size--h6: 1.125rem;
    --font-size--small: 0.875rem;
    --font-size--20px: 1.25rem;
    --dlw-font-line-height--h1: 1.2;

    /* headings font weight */
    --dlw-font-weight--h1:var(--font-weight--bold);
    --dlw-font-weight--h2: var(--font-weight--bold);

    /* Header specific config */
    --dlw-header-logo--max-width: 150px;
    --primary-nav-item--color: var(--color--text);
    --primary-nav-item--color--hover: var(--color--secondary);
    --dlw-doormat--shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    --primary-nav-item--font-weight: var(--font-weight--regular);

    /* Footer variables */
    --dlw-footer-body--bg: rgb(243, 252, 250);
    --dlw-footer-body--color: var(--color--text);
    --dlw-footer-social--bg: var(--color--primary);
    --dlw-footer-end--bg: var(--color--primary);
    --dlw-footer-end--color: #fff;

    /* Page intro settings */
    --dlw-page-intro--bottom-space: 2rem;

    /* Text Media */
    --dlw-media--border-radius: var(--dlw-border-radius) var(--dlw-border-radius) var(--dlw-border-radius) 0; 

    /* Buttons */
    --dlw-button--primary--color: var(--color--text);
    --dlw-button--primary--background-color: var(--dlw-color--secondary);
    --dlw-button--primary--border: none;
    --dlw-button--primary-hover--background-color: var(--dlw-color--secondary-dark--95);
    
    --dlw-button--secondary--color: var(--color--text);
    --dlw-button--secondary--background-color: transparent;
    --dlw-button--secondary--border: 2px solid var(--dlw-color--secondary);
    --dlw-button--secondary-hover--background-color: rgba(190, 213, 0, 0.2);
}