/*
MARK: Banner Slider
*/

    /* Banner Dots */
    .bbe-main-banner .row {
        position: relative;
    }

    .bbe-main-banner .row .slick-dots {
        position: absolute;
        bottom: 30px;
        right: 40px;
    }

    .bbe-main-banner .row .slick-vertical .slick-dots {
        bottom: 40px;
        right: 30px;
        flex-direction: column;
    }

    .bbe-main-banner .row .slick-dots li button {
        width: 15px;
        height: 15px;
        background: #a9adaa;
    }

    .bbe-main-banner .row .slick-dots li.slick-active button {
        width: 17px;
        height: 17px;
    }

    .bbe-main-banner .row .slick-dots li.slick-active button::before {
        border: 3px solid #ffffff;
    }

    /* Banner Arrow */
    .bbe-main-banner .controller-wrap {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        justify-content: space-between;
        width: 100%;
        z-index: 1;
        pointer-events: none;
        transition: var(--transition-1);
    }

    .bbe-main-banner .controller-wrap .slick-arrow {
        pointer-events: all;
        width: 38px;
        height: 50px;
        background: #ffffff4d;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        color: #fff;
        z-index: 1;
    }

    .bbe-main-banner .controller-wrap .slick-arrow i {
        font-size: 16px;
    }

    .bbe-main-banner .entry-content .bbe-article-figure img {
        position: absolute;
    }

    /* Image Ratio */
    .bbe-main-banner .ratio--wide .entry-content .bbe-article-figure {
        aspect-ratio: 16 / 9;
    }

    .bbe-main-banner .ratio--boxy .entry-content .bbe-article-figure {
        aspect-ratio: 4 / 3;
    }

    .bbe-main-banner .ratio--rectangle .entry-content .bbe-article-figure {
        aspect-ratio: 3 / 1;
    }

    .bbe-main-banner .ratio--banner .entry-content .bbe-article-figure {
        aspect-ratio: 2 / 1;
    }

    .bbe-main-banner .ratio--square .entry-content .bbe-article-figure {
        aspect-ratio: 1 / 1;
    }

    .bbe-main-banner .ratio--initial .entry-content .bbe-article-figure {
        aspect-ratio: 4 / 2;
    }

    .bbe-main-banner:not(.layout--two) .block-wrap:has(.banner-sidebar) .ratio--initial .entry-content .bbe-article-figure {
        height: 100%;
        aspect-ratio: initial;
    }

    .bbe-main-banner:not(.layout--two) .block-wrap:has(.banner-sidebar) .bbe-main-banner-main .block-inner,
    .bbe-main-banner:not(.layout--two) .block-wrap:has(.banner-sidebar) .bbe-main-banner-main .block-inner .entry-content,
    .bbe-main-banner:not(.layout--two) .block-wrap:has(.banner-sidebar) .bbe-main-banner-main .block-inner .slick-list,
    .bbe-main-banner:not(.layout--two) .block-wrap:has(.banner-sidebar) .bbe-main-banner-main .block-inner .slick-track,
    .bbe-main-banner:not(.layout--two) .block-wrap:has(.banner-sidebar) .bbe-main-banner-main .block-inner {
        height: 100%;
    }

    /* Content */
    .bbe-main-banner .entry-content .entry-inner {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .bbe-main-banner.align--center .entry-content .entry-inner {
        align-items: center;
    }

    .bbe-main-banner.align--right .entry-content .entry-inner {
        align-items: flex-end;
    }

    body .bbe-main-banner .entry-content .entry-inner > *:first-child {
        margin-top: 0;
    }

    .bbe-main-banner .entry-content .entry-inner .entry-categories {
        margin-top: 16px;
    }

    body .site .bbe-main-banner .bbe-main-banner-main .entry-title,
    body .site .bbe-main-banner .bbe-main-banner-main .entry-title a {
        --bbe-site-font-size: 32px;
        --bbe-site-font-lineheight: 1.34;
        --bbe-site-font-letterspacing: -0.01em;
    }

    .bbe-main-banner .entry-content .entry-inner .entry-title {
        max-width: 680px;
        margin-top: 16px;
    }

    .bbe-main-banner .entry-content .entry-inner .entry-excerpt {
        margin-top: 16px;
        font-size: 14px;
        font-weight: 300;
        line-height: 1.65;
        max-width: 520px;
    }

    .bbe-main-banner .entry-content .entry-inner .entry-meta {
        margin-top: 22px;
    }

    .bbe-main-banner .entry-content .entry-inner .entry-read-more {
        margin-top: 14px;
    }

    /* Banner with Sidebar */
    .bbe-main-banner .block-wrap {
        display: flex;
        gap: 30px;
    }

    .bbe-main-banner .block-wrap .bbe-main-banner-main,
    .bbe-main-banner .block-wrap .slider-content-wrap {
        flex: 1;
        min-width: 0;
    }

    .bbe-main-banner .block-wrap .bbe-main-banner-main .block-inner {
        position: relative;
    }

    .bbe-main-banner .block-wrap .banner-sidebar {
        flex: 0 0 30%;
    }

    .bbe-main-banner .block-wrap:has(.bbe-main-banner-left):has(.bbe-main-banner-right) .banner-sidebar {
        flex: 0 0 25%;
    }

    /* 3.1.1 Banner Layout One */
    .bbe-main-banner.layout--one .entry-content .bbe-article-figure .entry-inner,
    .bbe-main-banner.layout--four .entry-content .bbe-article-figure .entry-inner {
        position: absolute;
        inset: 0;
        z-index: 2;
        gap: 0;
        padding: 4%;
        justify-content: flex-end;
    }

    .bbe-main-banner.layout--one.position--top-left .entry-content .bbe-article-figure .entry-inner,
    .bbe-main-banner.layout--four.position--top-left .entry-content .bbe-article-figure .entry-inner {
        justify-content: flex-start;
    }

    .bbe-main-banner.layout--one.position--top-center .entry-content .bbe-article-figure .entry-inner,
    .bbe-main-banner.layout--four.position--top-center .entry-content .bbe-article-figure .entry-inner {
        justify-content: flex-start;
        align-items: center;
        text-align: center;
    }

    .bbe-main-banner.layout--one.position--top-right .entry-content .bbe-article-figure .entry-inner,
    .bbe-main-banner.layout--four.position--top-right .entry-content .bbe-article-figure .entry-inner {
        justify-content: flex-start;
        align-items: flex-end;
        text-align: right;
    }

    .bbe-main-banner.layout--one.position--center-left .entry-content .bbe-article-figure .entry-inner,
    .bbe-main-banner.layout--four.position--center-left .entry-content .bbe-article-figure .entry-inner {
        justify-content: center;
    }

    .bbe-main-banner.layout--one.position--center-center .entry-content .bbe-article-figure .entry-inner,
    .bbe-main-banner.layout--four.position--center-center .entry-content .bbe-article-figure .entry-inner {
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .bbe-main-banner.layout--one.position--center-right .entry-content .bbe-article-figure .entry-inner,
    .bbe-main-banner.layout--four.position--center-right .entry-content .bbe-article-figure .entry-inner {
        justify-content: center;
        align-items: flex-end;
        text-align: right;
    }

    .bbe-main-banner.layout--one.position--bottom-center .entry-content .bbe-article-figure .entry-inner,
    .bbe-main-banner.layout--four.position--bottom-center .entry-content .bbe-article-figure .entry-inner {
        align-items: center;
        text-align: center;
    }

    .bbe-main-banner.layout--one.position--bottom-right .entry-content .bbe-article-figure .entry-inner,
    .bbe-main-banner.layout--four.position--bottom-right .entry-content .bbe-article-figure .entry-inner {
        align-items: flex-end;
        text-align: right;
    }

    .bbe-main-banner.layout--one .entry-content .bbe-article-figure .bbe-article-thumb {
        filter: brightness(0.8) saturate(0.85);
    }

    .bbe-main-banner.layout--one .entry-content .bbe-article-figure:before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
        background: linear-gradient(to bottom, rgba(10, 8, 6, 0.15) 0%, rgba(10, 8, 6, 0.0) 30%, rgba(10, 8, 6, 0.55) 65%, rgb(10 8 6 / 85%) 100%);
    }

    body .site .bbe-main-banner:not(.layout--two) .entry-content .bbe-article-figure .entry-inner *,
    body .site .banner-sidebar.layout--overlay:not(.image--off) .bbe-article .entry-inner * {
        color: #fff;
        background: transparent;
        border: none;
        padding: 0;
    }

    /* 3.1.2 Banner Layout Two */
    .bbe-main-banner.layout--two .block-wrap:has(.bbe-main-banner-left):has(.bbe-main-banner-right) .controller-wrap {
        top: 30px;
        right: 30px;
        justify-content: right;
        gap: 15px;
        transform: initial;
    }

    .bbe-main-banner.layout--two .bbe-article.slick-current .entry-inner > * {
        animation: none;
    }

    .bbe-main-banner.layout--two .bbe-main-banner-main .bbe-article .entry-inner {
        margin-top: 30px;
    }

    .bbe-main-banner.layout--two .bbe-main-banner-main.align--center .bbe-article .entry-inner,
    .bbe-main-banner.layout--three .bbe-main-banner-main.align--center .bbe-article .entry-inner {
        align-items: center;
        text-align: center;
    }

    .bbe-main-banner.layout--two .bbe-main-banner-main.align--right .bbe-article .entry-inner,
    .bbe-main-banner.layout--three .bbe-main-banner-main.align--right .bbe-article .entry-inner {
        align-items: flex-end;
        text-align: right;
    }

    .bbe-main-banner.layout--two .bbe-article .entry-inner .entry-title {
        max-width: 780px;
    }

    .bbe-main-banner.layout--two .bbe-article .entry-inner .entry-excerpt {
        max-width: 620px;
    }

    /* 3.1.3 Banner Layout Three */
    .bbe-main-banner.layout--three .slider-content-wrap {
        position: relative;
        background-position: center center;
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        padding: 4%;
    }

    .bbe-main-banner.layout--three:has(.banner-sidebar) .slider-content-wrap {
        display: flex;
    }

    .bbe-main-banner.layout--three .slider-content-wrap .slider-content-inner-wrap {
        display: grid;
        grid-template-columns: 65% 35%;
        justify-content: center;
        align-items: center;
        z-index: 2;
        position: relative;
    }

    .bbe-main-banner.layout--three .slider-content-wrap .slider-content-inner-wrap > div {
        padding: 0 20px;
    }

    .bbe-main-banner.layout--three .slider-content-wrap .controller-wrap {
        opacity: 0;
        visibility: hidden;
    }

    .bbe-main-banner.layout--three .slider-content-wrap:hover .controller-wrap {
        opacity: 1;
        visibility: visible;
    }

    .bbe-main-banner.layout--three .slider-content-wrap .banner-overlay {
        position: absolute;
        inset: 0;
        z-index: 1;
        background: #0000003d;
    }

    .bbe-main-banner.layout--three .entry-content .bbe-article .bbe-article-figure {
        background: transparent;
    }

    body .site .bbe-main-banner.layout--three:has(.banner-sidebar) .slider-content-wrap .bbe-main-banner-main .bbe-article-figure {
        aspect-ratio: 4 / 3;
    }

    .bbe-main-banner.layout--three .entry-content .bbe-article .bbe-article-figure > a {
        display: none;
    }

    .bbe-main-banner.layout--three .entry-content .bbe-article .entry-inner {
        position: absolute;
        inset: 0;
        justify-content: center;
    }

    /* Sidebar Content */
    .bbe-main-banner.layout--three .sidebar-content {
        max-width: 500px;
    }

    .bbe-main-banner.layout--three .sidebar-content .bbe-article {
        display: flex;
        align-items: center;
        gap: 15px;
        border: none;
    }

    .bbe-main-banner.layout--three .sidebar-content .bbe-article + .bbe-article {
        margin-top: 16px;
    }

    .bbe-main-banner.layout--three .sidebar-content .bbe-article .bbe-article-figure {
        width: 92px;
        height: 92px;
        transition: all 0.25s ease-in-out;
    }

    .bbe-main-banner.layout--three .sidebar-content .bbe-article .bbe-article-figure img {
        transform: none;
    }

    .bbe-main-banner.layout--three .sidebar-content .bbe-article.slick-current .bbe-article-figure {
        border: 2px solid transparent;
    }

    .bbe-main-banner.layout--three .sidebar-content .bbe-article .entry-title {
        flex: 1;
        text-align: left;
    }

    .bbe-main-banner.layout--three .sidebar-content .bbe-article .entry-title,
    .bbe-main-banner.layout--three .sidebar-content .bbe-article .entry-title a {
        --bbe-site-font-lineheight: 1.5;
        font-size: calc(var(--bbe-site-font-size) - 2px);
    }

    .bbe-main-banner.layout--three .sidebar-content .bbe-article .entry-title a {
        color: #fff;
        -webkit-line-clamp: 2;
    }

    /* 3.1.4 Banner Layout Four */
    .bbe-main-banner.layout--four .entry-content .bbe-article {
        margin-inline: 10px;
    }

    .bbe-main-banner.layout--four .entry-content .bbe-article .entry-inner * {
        color: #fff;
    }

    .bbe-main-banner.layout--four .entry-content .bbe-article .entry-inner:before {
        content: '';
        background: #00000073;
        position: absolute;
        inset: 0;
        opacity: 0;
        transition: var(--transition-1);
    }

    .bbe-main-banner.layout--four .entry-content .bbe-article.slick-current .entry-inner:before {
        opacity: 1;
    }

/* 
MARK: 2.12 Banner Sidebar Widgets
*/

    body #page.site .bbe-main-banner .banner-sidebar:not(.scroll--off) {
        max-height: 580px;
        overflow-y: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        background:
            linear-gradient(var(--bbe-site-bg-color) 30%, transparent) center top,
            linear-gradient(transparent, var(--bbe-site-bg-color) 70%) center bottom,
            radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.4), transparent) center top,
            radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.4), transparent) center bottom;
        background-repeat: no-repeat;
        background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
        background-attachment: local, local, scroll, scroll;
    }

    .banner-sidebar .article-wrap {
        display: grid;
        gap: 25px;
    }

    .banner-sidebar .article-wrap .bbe-article {
        display: grid;
        gap: 17px;
    }

    .banner-sidebar .bbe-article .entry-inner .entry-title {
        -webkit-line-clamp: 2;
    }

    /* Grid */
    .banner-sidebar.layout--grid .bbe-article-figure {
        aspect-ratio: 16 / 9;
    }

    .banner-sidebar .entry-categories {
        margin-bottom: 9px;
    }

    .banner-sidebar .entry-excerpt {
        margin-top: 10px;
    }

    .banner-sidebar .entry-meta {
        margin-top: 9px;
    }

    /* List */
    .banner-sidebar.layout--list .article-wrap {
        gap: 18px;
    }

    body #page.site .banner-sidebar.layout--list .bbe-article:not(:last-child) {
        padding-bottom: 18px;
        border-bottom: 1px solid var(--bbe-site-border-color-muted);
    }

    .banner-sidebar.layout--list .bbe-article {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .banner-sidebar.layout--list .bbe-article .bbe-article-figure {
        width: 100px;
        height: 100px;
    }

    .banner-sidebar.layout--list.position--right .bbe-article .bbe-article-figure {
        order: 2;
    }

    .banner-sidebar.layout--list .bbe-article .entry-inner {
        flex: 1;
    }

    .banner-sidebar.layout--list .bbe-article .entry-inner .entry-title,
    .banner-sidebar.layout--list .bbe-article .entry-inner .entry-title a {
        font-size: calc(var(--bbe-site-font-size) - 2px);
    }

    /* Overlay */
    .banner-sidebar.layout--overlay .bbe-article .bbe-article-figure {
        aspect-ratio: 4 / 3;
    }

    .banner-sidebar.layout--overlay .bbe-article .bbe-article-figure:before {
        content: '';
        position: absolute;
        inset: 0;
        background: #0000003d;
        z-index: 1;
    }

    .banner-sidebar.layout--overlay .bbe-article .entry-inner {
        position: absolute;
        bottom: 0;
        padding: 6%;
        z-index: 1;
        width: 100%;
    }

    .banner-sidebar.layout--overlay .bbe-article .entry-inner .entry-title,
    .banner-sidebar.layout--overlay .bbe-article .entry-inner .entry-title a {
        font-size: calc(var(--bbe-site-font-size) - 1px);
    }

    /* Image Off */
    body #page.site .banner-sidebar.image--off .bbe-article:not(:last-child) {
        padding-bottom: 20px;
        border-bottom: 1px solid var(--bbe-site-border-color-muted);
    }

    .banner-sidebar.layout--overlay.image--off .bbe-article .entry-inner {
        position: initial;
        padding: 0;
    }