.depicter--homepage {
    position: relative;
    z-index: 1;
    padding: 85px 0 92px 0;
}
 
.depicter {
    position: relative;
}

.depicter__top-curve {
    position: absolute;
    top: -1px;
    left: 0;
    z-index: -1;
    width: 100%;
    height: auto;
}

.depicter__bottom-curve {
    position: absolute;
    bottom: -1px;
    left: 0;
    z-index: -1;
    width: 100%;
    height: auto;
}

.depicter__headings {
    margin-bottom: 48px;
}

.bottom-buttons .depicter__headings {
    margin-bottom: 30px;
    text-align: center;
}

.depicter__content {
    background: var(--white);
    border-radius: 8px;
    border-bottom: 4px solid var(--dark-blue);
    box-shadow: 0 0 8px 0 rgba(26, 36, 43, 0.25);
    overflow: hidden;
}

.depicter__left,
.depicter__right {
    position: relative;
    width: 100%;
}

.depicter__slider {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
    border-bottom-left-radius: 8px;
}

.depicter__slider img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

.img-after {
    z-index: 0;
}

.img-before {
    z-index: 1;
    -webkit-clip-path: inset(0 50% 0 0);
            clip-path: inset(0 50% 0 0);
}

.label {
    position: absolute;
    top: 16px;
    padding: 7px 24px;
    background: rgba(0, 45, 112, 0.85);
    color: var(--white);
    font-weight: 700;
    border-radius: 8px;
    z-index: 4;
    font-size: 18px;
    line-height: 1em;
}

.before-label {
    left: 16px;
}

.after-label {
    right: 16px;
}

.slider,
.slider1 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    cursor: ew-resize;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    z-index: 2;
}

.slider::before,
.slider1::before {
    content: '';
    position: absolute;
    width: 100%;
    height: calc(50% - 26px);
    top: 0;
    left: 0;
    background: var(--white);
}

.slider::after,
.slider1::after {
    content: '';
    position: absolute;
    width: 100%;
    height: calc(50% - 26px);
    bottom: 0;
    left: 0;
    background: var(--white);
}

.slider1::after,
.slider1::before {
    height: 100%
}

.handle,
.handle1 {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid var(--white);
    cursor: ew-resize;
    z-index: 3;
}

.handle::before,
.handle::after,
.handle1::before,
.handle1::after {
    content: "";
    font-family: 'trap-and-treat-icon';
    display: inline-block;
    padding: 6px 3px;
    font-size: 17px;
    color: var(--dark-blue);
}

.handle::before,
.handle1::before {
    content: '\e905';
}

.handle::after,
.handle1::after {
    content: '\e906';
}



.depicter--three-images .label {
    top: 8px;
    padding: 5px 20px;
    font-size: 16px;
}

.depicter--three-images .before-label {
    left: 10px;
}

.during-label {
    left: 50%;
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
}

.slider2 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    cursor: ew-resize;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    z-index: 2;
}

.slider2::before {
    content: '';
    position: absolute;
    width: 100%;
    height: calc(50% - 26px);
    top: 0;
    left: 0;
    background: var(--white);
}

.slider2::after {
    content: '';
    position: absolute;
    width: 100%;
    height: calc(50% - 26px);
    bottom: 0;
    left: 0;
    background: var(--white);
}

.handle2 {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid var(--white);
    cursor: ew-resize;
    z-index: 3;
}

.handle2::before,
.handle2::after {
    content: "";
    font-family: 'trap-and-treat-icon';
    display: inline-block;
    padding: 6px 3px;
    font-size: 17px;
    color: var(--dark-blue);
}


.handle2::before {
    content: '\e905';
}


.handle2::after {
    content: '\e906';
}








.depicter__text {
    padding: 34px 24px 17px;
}

.depicter__text h3 {
    color: var(--blue);
    font-size: 24px;
    font-weight: 800;
    line-height: 1em;
    margin-bottom: 12px;
}

.depicter__text p {
    margin-bottom: 10px;
}

.depicter__text .btn {
    text-align: left;
}

.depicter__btn {
    margin-top: 35px;
}

@media (min-width: 768px) {
    .depicter--homepage {
        padding: 85px 0 90px 0;
    }

    .depicter__headings .btn-group {
        margin-top: 25px;
    }

    .depicter__slider {
        height: 393px;
    }

    .depicter__text {
        padding: 37px 58px 33px 38px;
    }

    .depicter__text p {
        margin-bottom: 12px;
    }

    .depicter__text .btn-group {
        margin-top: 12px;
    }

    .depicter__text h3 {
        font-size: 32px;
    }

    .bottom-buttons .depicter__headings {
        margin-bottom: 45px;
    }

    .depicter--three-images .label {
        top: 15px;
        padding: 7px 25px;
        font-size: 18px;
    }

    .depicter__btn {
        margin-top: 45px;
    }
}

@media (min-width: 1200px) {
    .depicter--homepage {
        padding: 157px 0 172px 0;
    }

    .depicter__headings {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        margin-bottom: 40px;
    }

    .depicter__title {
        width: 100%;
    }

    .top-content .depicter__title {
        width: calc(100% - 407px);
        padding-right: 56px;
    }

    .depicter__title :last-child {
        margin-bottom: 0;
    }

    .depicter__headings .btn-group {
        width: 407px;
        margin: 0;
    }

    .depicter__content {
        display: flex;
        align-items: stretch; /* This makes both columns equal height */
    }

    .depicter__left,
    .depicter__right {
        position: relative;
        width: 50%;
        display: flex;
        flex-direction: column;
    }

    .depicter__slider {
        flex: 1; /* This makes the slider take up remaining space */
        min-height: 0; /* Allows flex item to shrink below content size */
    }

    .depicter__text {
        padding: 45px 47px 38px 36px;
    }

    .depicter__text p {
        margin-bottom: 12px;
    }

    .depicter__text .btn-group {
        margin-top: 24px;
    }

    .depicter__text h3 {
        font-size: 40px;
    }

    .depicter--three-images .depicter__left {
        width: calc(100% - 320px);
    }

    .depicter--three-images .depicter__right {
        width: 320px;
    }

    .depicter--three-images .depicter__text h3 {
        font-size: 32px;
    }

    .depicter--three-images .depicter__text {
        padding: 35px 30px 38px 30px;
    }

    .depicter--three-images .depicter__text p {
        margin-bottom: 8px;
    }

    .depicter__btn {
        margin-top: 52px;
    }

    .depicter--three-images .depicter__title {
        width: 831px;
        padding-right: 0;
        margin: 0 auto;
    }

}