/*==============================*/
/*=====----- TEMPLATE -----=====*/
/*==============================*/

.core-v2-preview-slider-with-header {
    margin-bottom: 60px;

    .widget-inner {
        --side-padding: var(--space-5);
        --widget-title-size: 2rem;
        --slide-title-size: 1.25rem;
        
        position: relative;
        overflow: hidden;
        background-color:  rgba(232, 223, 205, .4);
        padding-block: 40px;
    }

    .widget-header {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-5);
        align-items: start;
        max-width: none;
        margin: 0 0 32px;
        padding: 0 var(--side-padding) 0 0;
    }

    .widget-title {
        font-size: var(--widget-title-size);
    }

    .widget-desc {
        font-size: 1rem;
        line-height: 1.2;
        font-family: var(--font-soft);
        font-weight: var(--font-weight-medium);
    }

    .slider-cont {
        width: calc(100% - var(--side-padding));
        margin-left: auto;
    }

    .view-all-col {
        justify-content: flex-start;
    }

    .arrows,
    .glide__arrows {
        gap: var(--space-6);
    }

    .glide__arrow {
        margin: 0;
    }

    .glide__arrows {
        position: absolute;
        left: calc(var(--space-5) * -1);
        right: 0;
        z-index: 2;
        transform: translateY(-50%);
        display: flex;
        justify-content: space-between;
        padding-inline: 10px;
        pointer-events: none;
    }

    .glide__arrows .glide__arrow {
        margin: 0;
        pointer-events: all;
    }

    .glide__track {
        position: relative;
        z-index: 1;
    }

    /*============================*/
    /*=====----- SLIDES -----=====*/
    /*============================*/

    .slide {
        position: relative;
        overflow: hidden;
    }

    .img-cont {
        position: relative;
        margin-bottom: 15px;
    }

    .img-cont::before {
        display: block;
    }

    .slide-img {
        position: relative;
        z-index: 1;
    }

    .content-section {
        width: 100%;
        max-width: var(--width-compact);
        pointer-events: none;
    }

    .content-section a {
        pointer-events: all;
    }

    .content-upper {
        gap: 12px;
    }

    .slide-title {
        font-family: var(--font-display);
        font-weight: var(--font-weight-extrabold);
        font-size: var(--slide-title-size);
        line-height: 1.2;
        color: inherit;
    }

    .info-item a {
        text-decoration: none;
        font-size: inherit;
        color: inherit;
    }

    .info-item .icon {
        color: var(--yellow);
    }

    .slide-footer button {
        color: inherit;
    }

    .shared-play-button {
        top: var(--space-4);
        right: var(--space-4);
        left: auto;
        transform: none;
        width: var(--space-10);
        height: var(--space-10);
        font-size: var(--text-base);
    }

    .credits {
        top: 0;
        right: auto;
        bottom: auto;
        left: 0;
    }

    /* --- Trip builder button --- */
    .tripbuilder-cont {
        position: absolute;
        inset: 17px 15px auto auto;
        z-index: 4;
    }
    
    .tripbuilder-button {
        position: relative;
        display: block;
        padding: 0;
        margin: 0;
        font-size: 1.25rem;
        line-height: 1;
        background: none;
        border: none;
        border-radius: 0;
        filter: drop-shadow(0 2px 6px  #00000040);

    }
    
    .tripbuilder-button::before,
    .tripbuilder-button::after {
        display: block;
        font-family: var(--fa-6-family, 'Font Awesome 5 Free');
        content: '\f004';
    }
    
    .tripbuilder-button::before {
        font-weight: 900;
    }
    
    .tripbuilder-button::after {
        position: absolute;
        inset: 0 auto auto 0;
        z-index: 2;
        font-weight: 400;
        color: var(--white);
    }
    
    .tripbuilder-button.add::before {
        color: rgba(0, 0, 0, 0.2);
    }
    
    .tripbuilder-button.remove::before {
        color: var(--yellow);
    }

    /*===================================*/
    /*=====----- MEDIA QUERIES -----=====*/
    /*===================================*/

    @container (min-width: 48em) {
        .widget-inner {
            display: grid;
            grid-template: auto / minmax(0, 2fr) minmax(0, 5fr);
            gap: var(--space-6);
            padding-left: var(--side-padding);
        }

        .widget-header {
            display: grid;
            width: 100%;
            padding: 0;
            margin: 0;
            border-bottom: none;
        }

        .title-col,
        .view-all-col {
            width: 100%;
            max-width: none;
            margin: 0;
        }
        
        .title-col {
            padding-bottom: 0;
            border-bottom: none;
        }

        .view-all-col {
            display: block;
        }

        .slider-cont {
            width: 100%;
            margin: 0;
        }

        .img-cont::before {
            inset: 0;
        }

        /*----- arrows in slider -----*/

        .glide__arrows {
            left: -22px;
            padding-left: 0;
            padding-right: 48px;
        }
    }

    @container (min-width: 64em) {
        .widget-inner {
            --side-padding: 40px;

            grid-template: auto / minmax(0, 330fr) minmax(0, 1031fr);
            gap: var(--space-10);
            padding-block: 60px 50px;
        }

        .widget-header {
            padding-top: 20px;
        }
    }

    @container (min-width: 90em) {
        .shared-play-button {
            width: var(--space-16);
            height: var(--space-16);
            font-size: var(--text-2xl);
        }
    }

    @media (min-width: 64em) {
        margin-bottom: 100px;
    }
}

.contentRender_name_plugins_collections_template_custom_slider_preview_with_header_3_across_fullwidth:has(
    + .contentRender_name_plugins_collections_template_custom_core_v2_side_by_side_3_across
) .core-v2-preview-slider-with-header {
    margin-bottom: -40px;

    .widget-inner {
        padding-bottom: 122px;
    }

    @container (min-width: 64em) {
        .widget-inner {
            padding-bottom: 103px;
        }
    }

    @media (min-width: 64em) {
        margin-bottom: -46px;
    }
}