
.pxl-case-studies-grid {
    .pxl-post--featured {
        img {
            width: 100%;
        }
    }
}
.pxl-case-studies-grid1 {
    --x: 24px;
    --y: 28px;
    .pxl-pagination {
        margin-top: 59px;
    }
    .pxl-grid-inner {
        @media #{$max-lg} {
            --y: 20px;
        }
    }
    .pxl-post--featured {
        z-index: 9;
        @extend .pxl-transition-linear;
        &::after {
            content: '';
            @extend .pxl-pabsolute-full;
            background: linear-gradient(0deg, var(--gradient-color-from)  0%, var(--gradient-color-to)  79.95%);
        }
    }
    .pxl-post--inner {
        cursor: pointer;
        --gradient-color-from: #072032;
        --gradient-color-to: rgba(#072032, .0);
        position: relative;
        border-radius: 10px;
        @include box-shadow (0px 10px 60px 0px rgba(137, 151, 186, 0.15));
        overflow: hidden;
        &:hover {
            .pxl-post--featured {
                opacity: 0;
            }
            .pxl-content--group {
                opacity: 1;
            }
        }
    }
    .pxl-post--content {
        @extend .pxl-pabsolute-full;
        display: flex;
        align-items: flex-end;
        background-color: var(--primary-color);
        padding: 30px 30px 50px;
        backface-visibility: hidden;
        @extend .pxl-transition-linear;
    }
    .pxl-item--frame {
        position: absolute;
        right: 0;
        bottom: 0;
        top: 0;
        height: 100%;
    }
    .pxl-item--link {
        @extend .pxl-pabsolute-full;
    }

    .pxl-content--group {
        position: relative;
        z-index: 9;
        opacity: 0;
        @extend .pxl-transition-linear;
    }

    .pxl-post--category {
        display: inline-flex;
        flex-wrap: wrap-reverse;
        gap: 2px;
        color: white;
        text-transform: uppercase;
        margin-bottom: 25px;
        a {
            @extend .pxl-h6;
            white-space: nowrap;
            color: inherit;
            padding: 10px 21px;
            background-color: var(--dark-blue-1);
            @media #{$max-sm} {
                padding: 8px 16px;
                font-size: 14px;
            }
        }
    }
    .pxl-post--title {
        color: #FFF;
        font-family: 'Montserrat';
        font-size: 22px;
        font-weight: 600;
        line-height: 1.4;
        @media #{$max-sm} {
            font-size: 20px;
        }
    }
}
.pxl-case-studies-grid2 { 
    --width: 540px;
    --height: 413px;
    --x: 0px;
    --y: 60px;
    @media #{$max-md} { 
        --width: 490px;
        --y: 30px;
    }
    @media #{$max-sm} { 
        --width: 100%;
    }
    .pxl-pagination {
        margin-top: 76px;
    }
    .pxl-post--inner {
        position: relative;
        padding-bottom: 80px;
        background-color: transparent;
        @media #{$max-sm} {
            padding-bottom: 0;
        }
    }
    .pxl-grid-item {
        --size: 7%;
        &:nth-child(odd) {
            .pxl-post--content {
                left: var(--size);
            }
        }
        &:nth-child(even) {
            .pxl-post--content {
                right: var(--size);
            }
        }
        @media #{$max-sm} {
            --size: 0;
        }
    }
    .pxl-post--featured {
        border-radius: 20px;
        overflow: hidden;
        img {
            max-height: 640px;
        }
        @media #{$max-sm} { 
            border-radius: 20px 20px 0 0;
        }
    }
    .pxl-post--content {
        position: absolute;
        bottom: 0;
        width: 100%;
        max-width: var(--width);
        padding: 65px 60px 62px 75px;
        border-radius: 20px;
        border-bottom: 4px solid #86BB46;
        background: #FFF;
        @include box-shadow(0px 4px 20px 0px rgba(180, 199, 190, 0.29));
        @media #{$max-lg} { 
            padding: 45px;
        }
        @media #{$max-sm} { 
            border-radius: 0 0 20px 20px;
            padding: 30px;
            position: relative;
        }
    }
    .pxl-post--category {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 5px;
        width: 100%;
        margin-bottom: 4px;
        a {
            display: inline-block;
            color: var(--primary-color);
            font-family: 'Montserrat';
            font-size: 16px;
            font-weight: 500;
            padding: 7px 12px;
            border-radius: 5px;
            background: var(--light-green-2);
        }
        @media #{$max-sm} {
            margin-bottom: 10px;
            a {
                font-size: 14px;
                padding: 5px 10px;
            }
        }
    }
    .pxl-post--title {
        @extend .h7;
        margin-bottom: 14px;
        @media #{$max-md} {
            font-size: 28px;
        }
        @media #{$max-sm} {
            font-size: 26px;
        }
        @media #{$max-xs} {
            font-size: 24px;
        }
    }
    .pxl-post--excerpt {
        letter-spacing: -0.36px;
        margin-bottom: 25px;
        @media #{$max-sm} {
            font-size: 16px;
        }
    }
}
.pxl-case-studies-grid3 {
    @extend .pxl-grid-nogap;
    .pxl-pagination {
        margin-top: 79px;
    }
    .pxl-post--container, .pxl-post--inner, .pxl-post--featured, img {
        height: 100%;
    }

    .pxl-grid-inner {
        margin: 0;
    }
    .pxl-post--inner {
        position: relative;
        &:hover {
            .pxl-post--title,
            .pxl-post--category {
                transform: translateY(0);
                opacity: 1;
            }
        }
    }
    .pxl-post--content {
        z-index: 9;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 30px 0 30px 60px;
        overflow: hidden;
        @media #{$max-lg} {
            padding: 30px 0 30px 30px;
        }
    }
    .pxl-post--title {
        padding: 16.5px 50px 16.5px 25px;
        background-color: var(--primary-color);
        color: #FFF;
        font-family: 'Montserrat';
        font-size: 22px;
        font-weight: 600;
        line-height: 1.45455;
        transform: translateY(70px);
        opacity: 0;
        @extend .pxl-transition-linear;
        transition-duration: .3s;
        @media #{$max-lg} {
            padding: 16.5px 25px;
        }
    }
    .pxl-post--category {
        gap: 1px;
        display: flex;
        align-items: end;
        transform: translateY(-70px);
        opacity: 0;
        @extend .pxl-transition-linear;
        transition-duration: .3s;
        flex-wrap: wrap-reverse;
        a {
            padding: 11px 21px;
            background-color: var(--secondary-color);
            @extend .h6;
            color: #FFF;
            white-space: nowrap;
            @media #{$max-lg} {
                padding: 8px 12px;
            }
            @media #{$max-sm} {
                padding: 8px 10px;
                font-size: 16px;
            }
        }
    }
}

// BR Case Studies Carousel

.pxl-case-studies-carousel1 {
    @extend .pxl-swiper-on-hover;
    --spacing: -844px;
    margin-inline: var(--spacing);
    @media #{$max-lg} {
        --spacing: -720px;
    }
    @media #{$max-md} {
        --spacing: 0;
    }
    .pxl-swiper-arrows {
        bottom: 44.5%;
        max-width: calc((100% - (-2 * var(--spacing))) - (2 * 185px));
        @media #{$max-xl} {
            max-width: calc((100% - (-2 * var(--spacing))) - (2 * 15px));
        }
        
    }
    .pxl-swiper-slide {
        &.slide-active-custom {
            .pxl-post--content {
                opacity: 1;
            }
        }
    }
    .pxl-post--inner {
        position: relative;
    }

    .pxl-post--featured {
        overflow: hidden;
        img {
            height: 580px;
            width: 100%;
            @media #{$max-sm} { 
                height: auto;
            }
        }
    }

    .pxl-post--content {
        position: absolute;
        left: 46px;
        bottom: 55px;
        width: 100%;
        max-width: 490px;
        transition: opacity .5s linear;
        opacity: 0;
        background-color: #FFF;
        padding: 46px 35px 48px 57px;
        @include box-shadow(10px 10px 0px 0px rgba(255, 255, 255, 0.40));
        @media #{$max-sm} {
            position: relative;
            max-width: 100%;
            padding: 40px 30px;
            left: 0;
            bottom: 0;
            box-shadow: none;
        }
    }

    .pxl-post--title {
        color: var(--dark-blue-2);
        max-width: 319px;
        @media #{$max-sm} { 
            max-width: none;
        }
        @media #{$max-xs} { 
            font-size: 20px;
        }
    }
    .pxl-post--category {
        margin-bottom: 22px;
        display: flex;
        align-items: center;
        gap: 3px;
        flex-wrap: wrap;
        a {
            display: block;
            padding: 6px 12px;
            border-radius: 5px;
            background: var(--light-green-2);
            color: var(--primary-color);
            font-family: 'Montserrat';
            font-size: 16px;
            font-weight: 500;
            @media #{$max-xs} { 
                padding: 8px 10px;
                font-size: 14px;
            }
        }
    }

    .pxl-item--divider {
        height: 1px;
        background-color: #D7D7D7;
        margin-block: 18px 29px;
        max-width: 376px;
        @media #{$max-sm} {
            max-width: none;
        }
    }
    .pxl-content--bottom {
        position: relative;

    }
    .pxl-post--btn {
        position: absolute;
        right: 0;
        bottom: -3px;
        @extend .pxl-square-box;
        --size: 65px;
        @extend .pxl-dflex-center;
        background-color: var(--primary-color);
        @media #{$max-xs} { 
            bottom: 0;
            --size: 50px;
        }
        svg {
            position: relative;
            transition: inherit;
            .main {
                position: relative;
                transition: inherit;
            }
            .copy {
                position: absolute;
                left: 0;
                bottom: 0;
                transform: translate(-100%, 100%);
                opacity: 0;
            }
        }
        &:hover {
            background-color: var(--secondary-color);
            svg { 
                .main {
                    transform: translate(100%, -100%) ;
                    opacity: 0;
                }
                .copy {
                    transform:translate(0, 0) ;
                    opacity: 1;
                }
            }
        }
    }
    .pxl-info--label {
        color: var(--dark-blue-1);
    }
    .pxl-info--text {
        @extend .pxl-text4;
        color: #6B7F95;
    }

    .pxl-info--single {
        display: flex;
        align-items: center;
        gap: 6px;
        + .pxl-info--single {
            margin-top: 10px;
        }
    }
}

.pxl-case-studies-carousel3 {
    @extend .pxl-case-studies-grid3;
    .pxl-swiper-dots.pxl-swiper-pagination-bullets {
        padding-top: 61px;
    }
    .pxl-filter-inner {
        border-bottom: 1px solid #B0B6BC;
        .filter-item {
            color: #FFF;
            &.active, &:hover {
                color: var(--primary-color);
            }
            @media #{$max-sm} {
                background-color: #FFF;
                color: var(--secondary-color);
                &.active, &:hover {
                    background-color: var(--primary-color);
                    color: #FFF;
                }
            }
        }
    }
}