.right-caption-left-image,
.left-caption-right-image {
    position: relative;
}

.left-image,
.right-image{
    min-height: 600px;
    object-fit: cover;
}

.right-caption-left-image .left-image{
    object-position: -145px;
}

.left-caption-right-image .right-image{
    object-position: -805px;
}
.left-caption-right-image .right-image.PR{
    object-position: initial;
}
/* .left-caption-right-image .right-image.PG{
    object-position: -755px;
} */

.full-width-bottom-caption{
    position: relative;
}
.eal-sections{
    display: flex;
    gap: 20px;
    padding: 100px 0;
}
.eal-sections__column{
    flex-grow: 1;
}
.eal-sections__heading--center{
    text-align: center;
}
.eal-sections__column--separator{
    flex-shrink: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    text-transform: uppercase;
}
.eal-sections__column{
    padding-inline: 30px;
}
.search-box__input-control:focus, .search-box__input-control:focus-within {
    box-shadow: inset 0 1px 1px rgba(0,0,0,.8),0 0 8px rgba(53,65,83,.6);
    outline: auto;
}
.search-box__input-control:focus {
    border: 1px solid #66afe9;
    /* border-color: #66afe9; */
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
}
.ink-finder__label--center,
.product-finder__label--center{
    display: block;
    text-align: center;
    margin-top: 20px;
}


@media screen and (min-width: 768px) {
    .right-caption-left-image .left-image {
        object-position: left;
    }
    .left-caption-right-image .right-image {
        object-position: right;
    }
}

@media screen and (min-width: 992px) {
    .left-caption-right-image .caption-image{
        width: 100px;
    }
    .bottom-caption{
        text-align: center;
    }
}

@media screen and (min-width: 1024px) {
    .bottom-caption{
        width: 100%;
        padding-top: 40px;
    }
}

@media screen and (min-width: 1200px) {

    .right-caption,
    .left-caption {
        position: absolute;
        top: 0;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100%;
    }

    .right-caption .group-container, 
    .left-caption .group-container {
        max-width: 365px;
    }

    /* .left-image, .right-image {
        min-height: 500px;
        height: 500px;
    } */

}

@media screen and (min-width: 1400px) {
    
    /* .left-image, .right-image, .full-width-bottom-caption img {
        height: 500px;
    } */

    .full-width-bottom-caption img{
        object-fit: cover;
    }
}

@media screen and (min-width: 1600px) {
    .right-caption .group-container, 
    .left-caption .group-container {
        max-width: 600px;
    }
}

/* SECTIONS V2 */
/* .two-col-section__text > *, */
.two-col-section__image > *{
    margin-bottom: 0;
}
/* .two-col-section__image,
.two-col-section__text {
    border: 1px solid red;
} */
.two-col-section__text-container{
    display: none;
}
@media screen and (min-width: 1024px) {
    .two-col-section{
        display: flex;
        position: relative;
        justify-content: center;
    }
    .two-col-section__text-container{
        position: absolute;
        display: flex;
        height: 100%;
        align-items: center;
    }
    .two-col-section__text--mobile{
        display: none;
    }
    .two-col-section__text:first-of-type{
        padding-right: 50px;
    }
    .two-col-section__text:last-of-type{
        padding-left: 50px;
    }
    .two-col-section__text,
    .two-col-section__image{
        width: 50%;
    }
}

@media screen and (min-width: 1200px) {
    .two-col-section__text:first-of-type{
        padding-right: 100px;
    }
    .two-col-section__text:last-of-type{
        padding-left: 100px;
    }
}

/* V2 */
.section{
    position: relative;
}

.section__image--full{
    display: none;
}

.section__image--mobile{
    aspect-ratio: 1.5/1;
    object-fit: cover;
}

.section__caption-image{
    width: 45%;
}

.section__content > *,
.section__caption > *{
    margin-block: 0;
}

.section__content{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.section__caption{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

@media screen and (max-width: 991px) {
    .section__content{
        padding: 30px 10px;
    }
    
}

@media screen and (min-width: 600px) {
    .section__image--mobile{
        aspect-ratio: 2/1;
    }
}

@media screen and (min-width: 992px) {
    .section.wide-left .container{
        display: flex;
        gap: 100px;
        align-items: center;
    }
    .section--light{
        color: #ffffff;
    }

    .section__image{
        height: 600px;
        object-fit: cover;
    }
    .section__image.tiger{
        height: auto;
        object-fit: cover;
    }
    .section__content.tigerCon {
        background: rgba(0, 0, 0, 0.6); 
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); 
        padding: 20px;
    }
    .left-caption .group-container.ProCinema {
        background: rgba(0, 0, 0, 0.6); 
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); 
        padding: 20px;
    }

    .right-caption .group-container.PRP {
        background: rgba(0, 0, 0, 0.6); 
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); 
        padding: 20px;
    }

    .section__image--full{
        display: block;
    }

    .section__image--mobile{
        display: none;
    }
    
    .section__caption{
        display: flex;
        flex-direction: column;
        gap: 25px;
        justify-content: center;
        position: absolute;
        top: 0;
        height: 100%;
        width: 100%;
    }
    
    .section__caption--right .container{
        display: flex;
        justify-content: end;
    }

    .section__caption--top-right .container{
        display: flex;
        justify-content: end;
        padding-bottom: 230px;
    }
    .section__caption-image{
        width: 200px;
    }
    .section__content{
        width: 350px;
    }
    
}
@media screen and (min-width: 1024px) {
    
}
@media screen and (min-width: 1200px) {
    .section__content{
        width: 490px;
    }
    .section__image{
        object-fit: cover;
    }
}
@media screen and (min-width: 1400px) {
    .section__content{
        width: 540px;
    }

}
@media screen and (min-width: 1800px) {
    .section__caption--top-right .container{
        padding-bottom: unset;
    }

}
@media screen and (min-width: 2100px) {
    .section:has(.section__image--left) .section__content{
        width: 700px;
    }
}

/* FULL WIDTH SECTION WITH 2 HALF-WIDTH IMAGES */
/* AND RESPECTIVE CAPTIONS */

.section__two-images{
    display: none;
}

@media screen and (min-width: 992px) {
    .section__two-images{
        display: flex;
    }

    .section__image--half {
        width: 50%;
    }

    .section__caption--side-by-side .container{
        display: flex;
        justify-content: space-between;
        padding-top: 235px;
    }

}

/* SECTION WITH LEFT IMAGE AND RIGHT CAPTION */

@media screen and (min-width: 992px) {
    .section__image--left,
    .section__image--right{
        width: 50%;
        height: 500px;
    }    
}

/* SECTION WITH LEFT CAPTION AND RIGHT IMAGE */

@media screen and (min-width: 992px) {
    .section:has(.section__image--right){
        display: flex;
        align-items: center;
    }

    .section:has(.section__image--right) .section__caption--left{
        position: unset; 
        width: 50%;
    }

    .section:has(.section__image--right) .section__content{
        margin: auto;
    }

    .section__image--right{
        order: 1;
    }
}

@media screen and (min-width: 1800px) {
    .section:has(.section__image--right) .section__content{
        margin-right: 27%;
    }
}

/* Section with wider caption and narrower image */
.section.has-padding{
    padding-block: 50px;
}
.section.section--full:has(.section__image--full){
    padding-block: 0;
}
@media screen and (min-width: 992px) {
    .wide-caption .section__caption{
        position: unset;
        width: 70%;
    }
    .wide-caption .section__image{
        width: 30%;
        height: unset;
    }
    .wide-caption .container{
        display: flex;
        align-items: center;
        gap: 100px;
    }
    .wide-caption--right .section__caption{
        order: 1;
    }
    .section.has-padding{
        padding-block: 100px;
    }

}

/* SECTION WITH EQUAL WIDTH */

.equal-width .container{
    display: flex;
    flex-direction: column;
}

@media screen and (min-width: 992px) {
    .equal-width .container{
        flex-direction: row;
        align-items: center;
        gap: 100px;
    }

    .equal-width .section__caption,
    .equal-width .section__image{
        width: 50%;
    }
}

/*  */

/* MASONRY */
.masonry{
    display: grid;
    gap: 10px;
    /* grid-template-columns: 40% 20% 40%; */
    /* grid-template-rows: 380px 600px 380px; */
    max-width: 100%;
    overflow: hidden;
}
.masonry img{
    height: 100%;
    object-fit: cover;
}
.masonry > :first-child{
    grid-row: 1/2;
    grid-column: 1/2;
}
.masonry > :nth-child(2) {
    grid-row: 1/2;
    grid-column: 2/4;
}
.masonry > :nth-child(3) {
    grid-row: 3/4;
    grid-column: 1/3;
}
.masonry > :nth-child(4) {
    grid-row: 2/3;
    grid-column: 1/4;
}

@media screen and (min-width: 768px) {
    .masonry{
        grid-template-columns: 45% 27.5% 27.5%;
        /* grid-template-rows: 430px 100px 430px; */
    }
    .masonry > :first-child{
        grid-row: span 3;
    }
    .masonry > :nth-child(2) {
        grid-row: 1/2;
        grid-column: 2/3;
    }
    .masonry > :nth-child(3) {
        grid-row: 1/3;
        grid-column: 3/4;
    }
    .masonry > :nth-child(4) {
        grid-row: 2/4;
        grid-column: 2/3;
    }
}

/* 1 whole image and a bottom caption */
.section.bottom-caption{
    padding-top: 0;
    padding-bottom: 50px;
}
.section.bottom-caption img{
    max-height: 600px;
    object-fit: cover;
}
.bottom-caption .section__caption{
    position: relative;
    align-items: center;
}

@media screen and (min-width: 1200px) {
    .bottom-caption .section__text{
        width: 60%;
        margin: auto;
    }   
}

/* TEXT ONLY */
.text-only .section__caption {
    position: relative;
}

.splide:has(.card-grid) .section-title > *{
    margin-block: unset;

}

@media screen and (min-width: 992px) {
    .text-only .section__caption,
    .splide:has(.card-grid) .section-title {
        width: 70%;
        margin-inline: auto;
        text-align: center;
        align-items: center;
    }
    .splide:has(.card-grid) .section-title{
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    .splide:has(.card-grid) .section-title p{
        text-align: center;
    }
    .text-only .section__link{
        margin: auto;
    }
}

/*  */

@media screen and (min-width: 1400px) {
    .container.narrower{
        max-width: 1200px;
    }
}
@media screen and (min-width: 1600px) {
    .container.narrower{
        max-width: 1400px;
    }
}
@media screen and (min-width: 1920px) {
    .container.narrower{
        max-width: 1340px;
    }
}

/* TEXT ONLY TWO SECTIONS */
.text-only--two .section__caption{
    text-align: left;
    /* align-items: left; */
    align-items: start;
}
@media screen and (min-width: 992px) {
    .text-only--two .container{
        display: flex;
        gap: 30px;
    }
}

/* SECTION BLENDING */
@media screen and (min-width: 768px) {
    .blend,
    .blend-brown,
    .blend-bottom{
        position: relative;
    }
    .blend::before, 
    .blend::after,
    .blend-brown::before,
    .blend-brown::after,
    .blend-bottom::before,
    .blend-bottom::after{
        content: '';
        position: absolute;
        left: 0;
        width: 100%;
        height: 50px;
        background: rgb(0,0,0);
        background: -moz-linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8855917366946778) 51%, rgba(0,0,0,0) 100%);
        background: -webkit-linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8855917366946778) 51%, rgba(0,0,0,0) 100%);
        background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8855917366946778) 51%, rgba(0,0,0,0) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);
    }
    .blend-brown::before{
        background: rgb(28,28,28);
        background: -moz-linear-gradient(180deg, rgba(28,28,28,0) 0%, rgba(28,28,28,0.8855917366946778) 51%, rgba(28,28,28,0) 100%);
        background: -webkit-linear-gradient(180deg, rgba(28,28,28,0) 0%, rgba(28,28,28,0.8855917366946778) 51%, rgba(28,28,28,0) 100%);
        background: linear-gradient(180deg, rgba(28,28,28,0) 0%, rgba(28,28,28,0.8855917366946778) 51%, rgba(28,28,28,0) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#1c1c1c",endColorstr="#1c1c1c",GradientType=1);
    }
    .blend-brown::after{
        background: rgb(28,28,28);
        background: -moz-linear-gradient(180deg, rgba(28,28,28,0) 0%, rgba(28,28,28,0.8855917366946778) 51%, rgba(28,28,28,0) 100%);
        background: -webkit-linear-gradient(180deg, rgba(28,28,28,0) 0%, rgba(28,28,28,0.8855917366946778) 51%, rgba(28,28,28,0) 100%);
        background: linear-gradient(180deg, rgba(28,28,28,0) 0%, rgba(28,28,28,0.8855917366946778) 51%, rgba(28,28,28,0) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#1c1c1c",endColorstr="#1c1c1c",GradientType=1);
    }
    .blend::before,
    .blend-brown::before{
        top: -25px;
    }
    .blend::after,
    .blend-brown::after,
    .blend-bottom::after{
        bottom: -25px;
    }
}

/* SLIDE LEFT */

.columns {
    display: flex;
    justify-content: flex-end;
    gap: 20px;
    flex-direction: column;
}

@media screen and (min-width: 1024px) {
    .columns {
        flex-direction: row;
        opacity: 0;
        transform: translateY(-20px);
        transition: opacity .5s ease-in-out 1s, transform .5s ease-in-out 1s;
    }
}



.column {
    background: rgb(255, 255, 255);
    padding: 20px;
    filter: drop-shadow(0px 1px 3px #0000001f);
    color: #2c2c2c;
    height: fit-content;
}

@media screen and (min-width: 1024px) {
    .column {
        max-width: 400px;
    }
    .hidden-caption:hover .columns {
        opacity: 1;
        transform: translateY(0);
        max-width: 90%;
        z-index: 999;
        margin-left: auto;
    }
}

.hidden-caption:hover:has(.columns) {
    overflow-y: visible;
    overflow-x: clip; /* instead of hidden */
}

@media screen and (min-width: 992px) {
    .hidden-caption .section__caption{
        position: unset;
    }
}


@media screen and (min-width: 1024px) {
    .hidden-caption{
        overflow: hidden;
    }

    .hidden-caption .container:has(.section__caption) {
        position: absolute;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100%;
        background-color: rgb(0 0 0 / 70%);
        color: white;
        display: flex;
        transition: right 1s ease-in-out;
        padding: 100px;
    }

    .hidden-caption:hover .container:has(.section__caption) {
        right: 0;
        gap: 35px;
    }

    .hidden-caption img{
        position: relative;
        max-height: 600px;
        object-fit: cover;
        object-position: bottom;
    }

    .hidden-caption .section__caption{
        position: unset;
        width: 50%;
        justify-content: start;
        color: #e6e6e6;
    }
}

.text-orange{
    color: #ff5a21!important;
}

.text-orange::after{
    border-left: 10px solid #ff5a21!important;
}

.no-arrow::after{
    display: none!important;
}


.hide-on-mobile{
    display: none;
}

@media screen and (min-width: 1024px) {
    .hide-on-mobile{
        display: block;
    }
}

@media screen and (max-width: 1023px) {
    .hidden-caption .mobile-padding{
        padding: 30px 10px;
    }
}

.text-left,
.text-left *{
    text-align: left;
}