.image-buttons__heading {
    margin: 0 0 40px;
    padding: 0 5px;
}

.image-button {
    display: block;
    border-bottom: none;
    height: 370px;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    transition: all ease 0.3s;
    top: 0;
}

.image-button__hover:after {
    content: '\e901';
    font-family: 'sauders-icon';
    position: absolute;
    bottom: 20px;
    right: 27px;
    font-size: 28px;
    font-weight: normal;
    color: var(--color-orange);
}

.image-button__hover:before {
    content: '\e905';
    font-family: 'sauders-icon';
    position: absolute;
    right: 11px;
    font-size: 49px;
    font-weight: normal;
    color: #FFFFFF;
    bottom: 8px;
}

.image-button__img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-button__hover {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    background: rgba(203, 76, 39, 0.78);
    backdrop-filter: blur(4.25px);
    border-radius: 0px 0px 10px 10px;
    padding: 23px 100px 23px 18px;
    color: #fff;
}

.bg-white.pd-style .image-button__hover {
    background: rgba(55, 71, 106, 0.78);
}

.bg-pd-blue.pd-style .image-button__hover {
    background: rgba(205, 109, 22, 0.78);
}

.image-button__title {
    color: #fff;
    font-size: 35px;
    margin: 0;
}

.image-buttons-row {
    padding: 0 8px;
    gap: 32px 0;
}

.bg-orange-gradient .image-button__hover {
    background: rgba(192, 208, 47, 0.78);
    backdrop-filter: blur(4.25px);
}

.bg-orange-gradient .image-buttons__heading .sub-heading,
.bg-orange-gradient .image-buttons__heading h1,
.bg-orange-gradient .image-buttons__heading h2,
.bg-orange-gradient .image-buttons__heading h3,
.bg-orange-gradient .image-buttons__heading h4,
.bg-orange-gradient .image-buttons__heading h5,
.bg-orange-gradient .image-buttons__heading h6 {
    color: #fff;
}

.bg-orange-gradient .image-button__title,
.bg-orange-gradient .image-button__hover:before,
.bg-orange-gradient .image-button__hover,
.bg-orange-gradient .image-button__cta,
.bg-orange-gradient .image-button__cta:before {
    color: var(--color-dark-brown) !important;
}

.bg-orange-gradient .image-button__hover:after,
.bg-orange-gradient .image-button__cta:after {
    color: #C0D02F !important;
}

.bg-white.pd-style .image-button__hover::after,
.bg-white.pd-style .image-button__cta::after {
    color: var(--pd-primary-blue) !important;
}

.image-button-slider {
    padding: 0 0 82px;
}

.image-button-slider .slick-arrow {
    width: 49px;
    height: 49px;
}

.image-button-slider .slick-arrow:before {
    font-size: 49px;
}

.image-button-slider .slick-next {
    margin-right: -59px;
}

.image-button-slider .slick-prev {
    margin-left: -59px;
}

.image-button-slider .slick-arrow.slick-disabled {
    opacity: 0.5;
}

.image-buttons + .newsletter {
    
}

@media(min-width: 768px) {
    .image-buttons-row {
        padding: 0 4px;
    }

    .image-buttons__heading h2 {
        margin: 0 0 40px;
    }

    .image-button-slider .slick-slide {
        width: 312px;
        margin: 0 16px;
    }

    .image-button-slider {
        margin: 0 -52px;
    }

    .image-buttons__heading {
        margin: 0 0 45px;
    }
}

@media(min-width: 1200px) {
    .image-button__hidden {
        overflow: hidden;
        height: 0;
    }

    .image-button-item:hover .image-button__hidden {
        height: auto;
        margin: 10px 0 0;
        overflow: unset;
    }

    .image-button-item:hover .image-button__hover {
        padding: 32px 20px 23px 20px;
    }

    .image-button__cta {
        color: #fff !important;
        border: none;
        margin: 25px 0 0;
    }

    .image-button__cta:before {
        color: #fff !important;
    }

    .image-button__cta:after {
        color: var(--color-primary-orange) !important;
    }

    .image-button__title {
        color: #fff;
        font-size: 35px;
        margin: 0;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    
    /* Clamp description to two lines with ellipsis */
    .image-button__description,
    .image-button__description p {
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
    }
    

    .image-button__description p {
        font-weight: normal;
    }

    .image-button-item:hover .image-button__hover:after,
    .image-button-item:hover .image-button__hover:before {
        opacity: 0;
    }

    .no-link .image-button--link {
        cursor: default;
    }

    .no-link .image-button__cta {
        display: none;
    }

    .image-buttons-row {
        margin-top: 70px;
        justify-content: center;
    }

    .image-button-item {
        margin-bottom: 70px;
    }

    .image-button-item:hover .image-button {
        transform: translateY(-70px);
        box-shadow: 0px 4px 12.7px 5px rgba(0, 0, 0, 0.15);
    }

    .image-buttons__heading {
        padding: 0;
    }

    .image-button-slider {
        margin: 0 -16px;
        padding: 0;
    }

    .image-button-slider .slick-arrow {
        transform: translate(0, calc(50% - 20px));
        left: unset;
        bottom: unset;
        top: 50%;
    }

    .image-button-slider .slick-next {
        margin-right: -79px;
        right: 0;
        left: unset;
    }

    .image-button-slider .slick-prev {
        margin-left: -79px;
        right: unset;
        left: 0;
    }

    .image-button-slider .slick-slide {
        margin: 70px 16px 0;
    }

    .image-buttons__heading h2 {
        margin: 0 0 25px;
    }
}