@import url("/index.cfm/fo/bootstrap.min.css");

:root {
    --main-title-color: #28526e;
    --main-content-color: #666666;
    --main-color-white: #ffffff;
    --main-section-bg-color-gray: rgb(24 48 84 / 5%);

    --main-section-max-width-m: 790px;
    --main-section-max-width-ml: 920px;
    --main-section-max-width-l: 1080px;
    --main-section-max-width-xl: 1200px;
    --main-section-max-width-xxl: 1320px;

    --main-title-size-h1: 64px;
    --main-title-size-h2: 40px;
    --main-title-size-h3: 28px;

    --main-title-padding: 24px;

    --main-content-font-size: 17px;
    --main-description-font-size: 12px;

    --main-font-regular: 'Rehn regular',Helvetica,Arial,Lucida,sans-serif;
    --main-font-medium: 'Rehn medium',Helvetica,Arial,Lucida,sans-serif;
    --main-font-light: 'Rehn light',Helvetica,Arial,Lucida,sans-serif;

    --feature-bg-color: #F2F5F7;
    --feature-color: #2c5b7a;

    --main-color-link: #255a7a;
    --main-color-link--active: #142f41;

    --footer-background-color:  #e7e9ef;
}

* {
    box-sizing: border-box;
}
html {
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    font-family: var(--main-font-regular)!important;
    font-weight: 500;
}
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
img {
    max-width: 100%;
    height: auto;
}

a, abbr, acronym, address, applet, b, big, blockquote, body, center, cite, code, dd, del, dfn, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, kbd, label, legend, li, object, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, tt, u, ul, var {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    vertical-align: baseline;
    background: transparent;
}


/* header */
.header {
    line-height: 23px;
    font-weight: 500;
    background-color: #fff;
    width: 100%;
    box-shadow: 0 1px 0 rgb(0 0 0 / 10%);
}

.header--sticky {
    position: fixed;
    z-index: 99999;
}

.header__container {
    width: 90%;
    max-width: 1080px;
    margin: auto;
}

.header__logo_img {
    max-height: 100%;
}

.header__logo_img--hide {
    display: none;
}

.header--sticky .header__logo_img {
    width: calc(320px * (54 / 78));
}

.header .header__logo_img {
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}


.header__logo-container {
    height: 100%;
    opacity: 1;
}

.header--sticky .header__logo-container {
}

.menu {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    margin: 0;
    padding: 0;
    min-height: 54px;
}
.menu__item {
    font-size: 14px;
    margin-right: 22px;
}
.menu__item:last-child {
    margin-right: 0px;
}
.menu__item_link {
    color: #666666;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
}
.menu__item_link--current-page {
    color: #275a7b;
}
.menu__item_link:hover {
    opacity: 0.7;
    text-decoration: underline;
    color: #333333;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

@media (max-width: 991px) {
    .header__logo {
        width: 90%;
        margin-inline: auto;
    }

    .menu {
        flex-direction: column;
        background-color: white;
        width: 90%;
        margin-inline: auto;
        padding: 5%;
        border-top: 3px solid #275a7b;
        box-shadow: 0 2px 5px rgb(0 0 0 / 10%);
        -webkit-box-shadow: 0 2px 5px rgb(0 0 0 / 10%);
    }

    .header__container {
        position: relative;
        width: 100%;
    }

    .navbar-toggler {
        margin: 0!important;
        padding: 0;
    }

    .navbar-collapse {
        position: absolute;
        top: 100%;
        width: 100%;
        left: 0px;
        z-index: 9999;
    }

    .menu__item {
        width: 100%;
        border-bottom: 1px solid rgba(0,0,0,.03);
        margin: 0!important;
    }

    .menu__item:hover {
        background-color: rgba(0,0,0,.03);
        opacity: .7;
    }

    .menu__item_link  {
        font-size: 14px;
        display: block;
        padding: 0.8em 1em;
    }

}

/* main */
#content {
    display: flex;
    flex-direction: column;
}

.main {
    flex: 1;
    display: flex;
    flex-direction: column;
}


.section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.section__container {
    width: 90%;
    padding: 64px 0;
}

.section_max-size-m {
    max-width: var(--main-section-max-width-m);
}

.section_max-size-ml {
    max-width: var(--main-section-max-width-ml);
}

.section_max-size-l {
    max-width: var(--main-section-max-width-l);
}

.section_max-size-xl {
    max-width: var(--main-section-max-width-xl);
}

.section_max-size-xxl {
    max-width: var(--main-section-max-width-xxl);
}

.section_gray {
    background-color: var(--main-section-bg-color-gray);
}

.section_bg-white {
    background-color: var(--main-color-white);
}

.section.section_color-white h1, 
.section.section_color-white h2, 
.section.section_color-white h3, 
.section.section_color-white h4, 
.section.section_color-white p {
    color: var(--main-color-white);
}

.section_white * {
    color: var(--main-color-white) !important;
}

.section__title {
    font-family: var(--main-font-medium);
    font-size: var(--main-title-size-h2);
}

.section__subtitle {
    font-family: var(--main-font-light);
    font-size: var(--main-title-size-h3);
}

.section__content {
    color: var(--main-content-color);
    font-size: var(--main-content-font-size);
    line-height: 1.4;
    width: 100%;
}

.section__content a {
    text-decoration: none;
    color: var(--main-color-link);
}

.section__content a:hover,
.section__content a:focus {
    text-decoration: underline;
    color: var(--main-color-link--active);
}

a.src-sub-link {
    color: #aab62a;
    font-size: 17px;
}
a.src-sub-link:focus, a.src-sub-link:hover {
    text-decoration: none;
    color: #aab62a;
}
a.src-sub-link-lite {
    color: #d3d99d;
    font-size: 17px;
}
a.src-sub-link-lite:focus, a.src-sub-link-lite:hover {
    text-decoration: none;
    color: #d3d99d;
}

.section__link--icon {
    display: flex;
    align-items: center;
    font-family: var(--main-font-medium);
}

.section__link--icon img {
    height: 100px;
    margin-right: 16px;
}

.section h2, h3 {
    color: var(--main-title-color);
    line-height: 1.25;
    margin-bottom: var(--main-title-padding);
}

.section h4 {
    color: var(--main-title-color);
    padding-bottom: 1em;
}

.section p {
    padding-bottom: 1em;
}

.section p:last-of-type {
    padding-bottom: 0;
}

.section ul {
    list-style-type: disc;
    padding: 0 0 1.25em 1em;
    line-height: 1.5;
}

.section__row {
    width: 100%;
    display: flex;
}

.section__row:not(:last-child) {
    margin-bottom: 64px;
}

.section__row--mb16 {
    margin-bottom: 16px;
}

.section__row--mb24 {
    margin-bottom: 24px;
}

.section__row--mb32 {
    margin-bottom: 32px;
}

.section__row--mb48 {
    margin-bottom: 48px;
}

.section__row--mb64 {
    margin-bottom: 64px;
}

.section__col {
    flex-grow: 1;
    flex-basis: 0;
}

.section__col:not(:last-of-type) {
    margin-right: 5.5%;
}

.section__row--icons {
    gap: 5.5%;
    justify-content: center;
}

.section__row--icons .section__col {
    height: 128px;
}

.section__row--icons .section__col .section__image {
    height: 100%;
    object-fit: contain;
}

.section__row--features {
    gap: 16px;
}

.section__row--icons,
.section__row--features {
    flex-wrap: wrap;
}

.section__row--icons .section__col,
.section__row--features .section__col {
    margin-right: 0;
    flex: 0 0 auto;
}

.section__row--icons .section__col {
    width: calc((100% - 5.5% * 3) / 4);
}

.section__row--features .feature {
    width: calc((100% - 16px * 2) / 3);
}

@media (max-width: 980px) {
    .section__row {
        flex-direction: column;
    }
    .section__col {
        padding: 16px 8px;
    }

    .section__col:not(:last-of-type) {
        margin-right: 0;
    }

    .section__row--icons,
    .section__row--features {
        flex-direction: row;
        padding: 0
    }

    .section__row--icons .section__col {
        width: calc((100% - 5.5%) / 2);
    }

    .section__row--features .feature {
        width: calc((100% - 16px) / 2);
    }
}

@media (max-width: 479px) {
    .section__row--features .feature,
    .section__row--icons .section__col {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .section h1 {
        font-size: 32px;
        line-height: 32px;
    }
}

.section__image {
    max-width: 100%;
    height: auto;
    overflow-clip-margin: content-box;
    overflow: clip;
}

.section__image-description {
    font-size: var(--main-description-font-size);
}

.section-main {
    padding: 72px 0;
    background-color: #fff;
    background-position: 50%;
    background-position-x: 50%;
    background-position-y: center;
    background-size: cover;
}

.section-main a.src-sub-link {
    text-shadow: 0 0.08em 0 rgba(0,0,0,0.4);
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 400;
}

.section-main__title {
    margin-bottom: 32px;
    font-family: var(--main-font-medium);
    font-size: var(--main-title-size-h1);
    color: var(--main-color-white);
    line-height: 1;
    text-align: center;
    word-wrap: break-word;
    text-shadow: 0 0 0.3em rgba(0,0,0,0.4);
}

.section-main__subtitle {
    font-family: var(--main-font-light);
    font-size: var(--main-title-size-h3);
    color: var(--main-color-white);
    line-height: 1.25;
    text-align: center;
    text-shadow: 0 0 0.3em rgba(0,0,0,0.4);
}

.section__heading {
    font-family: var(--main-font-medium);
    font-size: 16px;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.footer {
    flex: 0;
}

.nwl-platform_src {
    margin-bottom: 36px;
    margin-top: 48px;
}

.nwl-platform_src a {
    color: rgba(10,10,11,0.9);
    border-width: 0px;
    border-radius: 4px;
    font-size: 18px;
    font-family: var(--main-font-medium);
    margin-top: 48px;
    background-color: #bfba28;
    padding: 16px;
}

.feature {
    background-color: var(--feature-bg-color);
    color: var(--feature-color);
    font-family: var(--main-font-medium);
    font-size: 16px;
    line-height: 19px;
    height: 77px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 4px;
}


.footer {
    padding: 0 60px 0;
    background-color: var(--footer-background-color);
    color: var( --main-content-color);
    font-size: 17px;
}

.footer__contact-src {
    color: var(--main-title-color);
    padding: 16px;
    font-family: var(--main-font-medium);
    font-size: 20px;
    line-height: 1.7em;
    background-color: transparent;
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
    border: 1px solid;
    border-color: var(--main-title-color);
    border-radius: 4px;
}

.footer .section__col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.footer__image-description {
    color: var(--main-title-color);
    text-align: center;
}

.footer .footer__contact-src:hover {
    color: var(--main-title-color);
}

.footer a:focus,.footer a:hover {
    text-decoration: underline;
    color: #142f41;
}

.footer a {
    text-decoration: none;
    color: #255a7a;
}

.link {
    text-decoration: none;
    color: #255a7a;
}
.link:focus,.link:hover {
    text-decoration: underline;
    color: #142f41;
}

#startseite-video {
    position: absolute;
    top: 0;
    bottom: calc(1vh - 40%);
    min-width: 100%;
    min-height: 100%;
    z-index: -1;
}

.section__card {
    width: 100%;
    background-size: 100% 100%;
}

.section__card h3, .section__card h4 {
    color: var(--main-color-white);
    margin: 0;
    padding: 0;
}

.section__card > * {
    padding: 32px 0 32px 32px;
}

.section__bg-image {
    width: 100%;
    background-size: 100% 100%;
}

/* bootstrap styles */

.navbar-toggler {
    font-size: 16px!important;
    border: 0;
}

.navbar-toggler:focus,
.navbar-toggler:focus-visible {
    box-shadow: 0 0 0 0!important;
    border: 0;
}

.carousel-dark .carousel-indicators [data-bs-target] {
    width: 7px!important;
    height: 7px!important;
    margin: 0 5px!important;
    border-radius: 50%!important;
}


.carousel .carousel-control-next, 
.carousel .carousel-control-prev {
    display: none;
}

.carousel:hover .carousel-control-next, 
.carousel:hover .carousel-control-prev {
    display: initial;
}


.carousel .carousel-control-next-icon, 
.carousel .carousel-control-prev-icon {
    background-size: 120% 120%;
}

.navbar-toggler-icon {
    background-image: url("/index.cfm/fo/toggle-btn.svg");
}


/* SIDEBAR */
.sidebar {
    height: auto;
    margin-right: 70px;
    min-width: 210px;
    flex-grow: 1;
    flex-basis: 20%;
}
.sidebar__link {
    border-radius: 4px;
    color: var(--main-content-color);
    display: block;
    font-weight: 300;
    font-size: 15px;
    margin-bottom: 12px;
    padding: 8px 16px;
    text-decoration: none;
    display: flex;
}
.sidebar__link:hover {
    background-color: var(--main-title-color);
    color: #F2F5F7;
}
.sidebar__link--active {
    background-color: var(--main-title-color);
    color: #F2F5F7;
}

.sidebar__title {
    font-family: var(--main-font-medium);
    color: rgba(49, 55, 63, 0.68);
    font-size: 18px;
    line-height: 125%;
}

.sidebar__link:hover .icon path {
    fill: #F2F5F7 !important;
}

.article {
    flex: 1 0 65%;
    max-width: 66%;
    min-width: 640px;
    margin-bottom: 16px;
}
.article h1, h2, h3, h4 {
    color: var(--main-title-color);
}
.article__title {
    color: var(--main-title-color);
    line-height: 1.25;
    margin-bottom: 20px;
    font-family: var(--main-font-medium);
    font-size: 36px;
    display: block;
}
.right-side-bar-container {
    min-width: 200px;
    position: relative;
    height: 100%;
    margin-left: 20px;
}
.right-side-bar {
    display: flex;
    flex-direction: column;
    position: -webkit-sticky;
    position: sticky;
    top: 90px;
    right: 0;
    z-index: 2;
    overflow-y: auto;
}
.anchor-link {
    font-family: var(--main-font-regular);
    font-size: 15px;
    line-height: 125%;
    text-decoration: none;
    margin-bottom: 12px;
    color: rgba(49, 55, 63, 0.68);
}
.container {
    font-family: var(--main-font-regular);
    display: flex;
    flex-direction: row;
}

.hide {
    display: none;
}


    .agenda {
        margin-bottom: 40px;
    }
    .agenda__item, .agenda__item--past {
        display: flex;
        justify-content: space-between;
        height: 56px;
        padding: 24px 16px 8px 16px;
        border-bottom: 1px solid #d9d9d9;
        color: var(--main-title-color);
        font-size: 16px;
        line-height: 24px;
    }
     .agenda__item--past {
         color: #959AA2;
         font-family: var(--main-font-regular);
    }
    .agenda__date {
        font-family: var(--main-font-medium);
    }
    .agenda__time {
        font-family: var(--main-font-light);
    }

.meeting-form {
    display: flex;
    flex-direction: column;
}
    .input-label {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-basis: 30%;
    }
    .input-label:not(:last-of-type) {
        margin-bottom: 8px;
    }
    .meeting-form__input {
        flex-basis: 70%;
        height: 48px;
        padding: 12px 16px;
        border-radius: 4px;
        border: 1px solid #B3B3B3;
    }
.meeting-form button[type="submit"] {
    padding: 12px 16px;
    border-radius: 4px;
    background-color: #28526E;
    color: white;
    border: 0;
    align-self: end;
}


/*ARTICLE STYLES START*/

.scribe-screenshot {
            border: 1px solid #e4e4e4;
        }
        .article .section p {
            margin: 16px 0;
            font-size: 18px;
            color: #666666;
            overflow-wrap: break-word;
            padding-bottom: 0;
        }
        .article .section ul {
            list-style-type: disc;
        }
        .article .section ul, .article .section ol {
            padding-left: 20px;
            list-style-position: outside;
            margin: 20px 0 20px 20px;
        }
        .article h1 {
            font-size: 32px;
        }
        .article h2 {
            font-size: 22px;
            font-weight: 400;
        }
        .article h3 {
            font-size: 18px;
            font-weight: 600;
        }
        pre {
            max-height: 500px;
            background: #f4f5f7;
            line-height: 1.1;
        }
        pre:not(:last-child) {
            margin-bottom: 16px;
        }
        pre code {
            counter-reset: line-numbering;
        }
        pre code .line::before {
            content: counter(line-numbering);
            counter-increment: line-numbering;
            padding-right: 8px;
            padding-left: 8px;
            margin-right: 5px;
            width: 1.5em;
            text-align: right;
            user-select: none;
            background: #ebecf0;
            color: #505F79F7;
        }
        strong {
            overflow-wrap: break-word;
        }
        .request {
            display: inline-flex;
            justify-content: center;
            flex-shrink: 0;
            max-width: 48px;
            width: 100%;
            height: 20px;
            box-sizing: border-box;
            border-radius: 4px;
            align-items: center;
            font-size: 0.875rem;
            font-weight: 600;
            line-height: 1rem;
        }
        .request.request--get {
            color: #216E4E;
            background-color: #DFFCF0;
            border: 1px solid #216E4E;
        }
        .request.request--post {
            color: #5E4DB2;
            background-color: #F3F0FF;
            border: 1px solid #5E4DB2;
        }
        .highlighted-block {
            background-color: #1830540D;
            width: 100%;
            padding: 40px;
            display: flex;
            flex-direction: column;
            gap: 32px;
            flex-wrap: wrap;
            align-content: center;
            margin: 40px 0;
            font-size: 18px;
        }
        .highlighted-block__title {
            color: var(--feature-color);
            font-size: 16px;
            text-transform: uppercase;
            line-height: 100%;
            font-family: var(--main-font-medium);
            margin: auto;
        }
        .highlighted-block__section{
            display: flex;
            flex-direction: row;
            gap: 40px;
        }
        .highlighted-block__avatar {
            width: 135px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 11px;
            text-align: center;
            padding-bottom: 16px;
            line-height: 1.25;
            font-size: 15px;
        }
        .highlighted-block__list {
            line-height: 2;
            margin: 0 0 0 10px !important;
        }
    .info-icons-block {
        display: flex;
        flex-direction: row;
        gap: 32px;
        height: 58px;
        align-items: flex-start;
        margin-bottom: 40px;
    }
    .info-icons-block__section {
        display: flex;
        flex-direction: row;
        gap: 11px;
        align-items: center;
        line-height: 1.25;
        font-size: 15px;
    }
    .info-icons-block__text {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    .info-icons-block__title {
        color: black;
    }
    .agenda-header {
         display: flex;
         gap: 10px;
         height: 32px;
     }
     .agenda-pre {
           font-family: inherit;
           max-height: none;
           background: none;
           line-height: inherit;
     }
     .file-list-block {
            display: flex;
            flex-direction: column;
            gap: 24px;
            margin: 40px 0 134px 0;
            font-size: 18px;
     }
     .file-list-block__item {
            display: flex;
            flex-display: row;
            gap: 16px;
            align-items: center;
     }

    .accordion-title {
        background-color: #F3F5F7;
        width: 100%;
        color: var(--main-title-color);
        font-size: 14px;
        text-transform: uppercase;
        line-height: 20px;
        font-family: Roboto;
        font-weight: 500;
        letter-spacing: 0.3px;
        padding: 8px 16px;
        margin: 40px 0 24px 0;
    }

        .accordion {
            padding: 0;

        .accordion-header {
            margin-bottom: 0;
        }

        .accordion-item {
            border-radius: 0;
            border-top-width: 0;
            border-left-width: 0;
            border-right-width: 0;
            border-bottom: 1px solid #D9D9D9;
        }

        .accordion-button {
            font-family: var(--main-font-medium);
            font-size: 16px;
            font-weight: 400;
            line-height: 24px;
            text-align: left;
            color: var(--main-content-color);
            padding: 16px 0 16px 16px;
        }

        .accordion-button::after {
            background-image:url("data:image/svg+xml,<svg width='20' height='18' viewBox='0 0 20 18' fill='none' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M4.13337 7.15665C4.35428 6.79962 4.77215 6.72726 5.0667 6.99504L9.32733 10.8683C9.70875 11.2151 10.2912 11.2151 10.6727 10.8683L14.9333 6.99504C15.2278 6.72726 15.6457 6.79962 15.8666 7.15665C16.0875 7.51368 16.0278 8.02018 15.7333 8.28795L10.6727 12.8885C10.2912 13.2352 9.70875 13.2352 9.32733 12.8885L4.2667 8.28795C3.97215 8.02018 3.91246 7.51368 4.13337 7.15665Z' fill='%23666666'/></svg>")
        }

        .accordion-button:not(.collapsed) {
            background-color: initial;
            color: var(--feature-color);
            box-shadow: none;
        }

        .accordion-button:not(.collapsed)::after {
            background-image:url("data:image/svg+xml,<svg width='20' height='17' transform='rotate(180)' viewBox='0 0 20 17' fill='%232c5b7a' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M15.8666 12.6768C15.6457 13.0338 15.2279 13.1062 14.9333 12.8384L10.6727 8.96513C10.2912 8.61838 9.70875 8.61838 9.32733 8.96513L5.0667 12.8384C4.77215 13.1062 4.35428 13.0338 4.13337 12.6768C3.91246 12.3198 3.97215 11.8133 4.2667 11.5455L9.32733 6.94495C9.70875 6.59821 10.2912 6.59821 10.6727 6.94495L15.7333 11.5455C16.0278 11.8133 16.0875 12.3198 15.8666 12.6768Z'/></svg>")
        }

        .accordion-button:focus {
            box-shadow: none;
        }

        .accordion-body {
            font-family: var(--main-font-regular);
            font-size: 16px;
            font-weight: 400;
            line-height: 24px;
            text-align: left;
            color: var(--main-content-color);
            padding: 0 16px;
            margin-bottom: 32px;
        }

        .accordion-body p {
            font-size: inherit;
            margin: 14px 0;
        }

        .accordion-body p:first-child {
            margin-top: 0;
        }

        .accordion-body ul, .accordion-body ol {
            padding: 0;
            margin: 0 0 0 20px;
        }
}
    .article table {
        width: 100%;

        thead {
            background-color: #F3F5F7;
            margin-bottom: 24px;
        }

        th {
            padding: 8px 16px;
            font-size: 14px;
            line-height: 20px;
            letter-spacing: 0.3px;
            text-transform: uppercase;
            color: var(--main-title-color);
            font-weight: 500;
            font-family: Roboto;
        }

        td {
             vertical-align: baseline;
        }

        tbody {
            font-family: var(--main-font-light);
            font-size: 16px;
            font-weight: 400;
            line-height: 24px;

            tr {
                border-bottom: 1px solid #D9D9D9;
            }
            td {
                padding: 16px;
            }
            tr:nth-child(1) td {
                padding-top: 40px;
            }
            b {
                font-family: var(--main-font-medium);
                font-weight: initial;
            }
        }
    }

.video-title {
            font-family: 'Roboto';
            font-weight: 700;
            font-size: 32px;
            line-height: 40px;
            margin-bottom: 40px;
            color: var(--main-title-color);
        }

        .video-card {
            padding: 64px;
            background-color: var(--feature-bg-color);
            color: var(--main-content-color);
            position: relative;
            margin-top: 20px;
        }

        .video-card__background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('/index.cfm/etc/video_tutorials_card.png');
            background-size: 100%;
            background-position: center;
        }

        .video-card__text {
            width: 50%;
            position: relative;
            font-size: 14px;
            font-family: 'Roboto';
            font-weight: 400;
            line-height: 20px;
        }

        .video-grid {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 60px 40px;
            padding: 60px 0;
        }

        .video-grid__tile {}
        .video-grid__tile_player {
        }

        .video-grid__tile-title {
            color: var(--feature-color);
            text-transform: uppercase;
            font-family: 'Roboto';
            font-size: 14px;
            line-height: 20px;
            letter-spacing: 0.3px;
        }
        .video-grid__tile_player_container {
            display: flex;
            aspect-ratio: 16 / 9;
            flex-direction: column;
            justify-content: center;
            margin-bottom: 16px
        }


/*ARTICLE STYLES END*/