.banner-head {
    position: relative;
    max-width: 1600px;
    margin: 0 auto;
    overflow: hidden
}

    .banner-head img {
        display: block;
        max-width: 100%;
        height: 100%;
        width: 100%
    }

.banner-head__wrapper {
    position: relative
}

.banner-head__slide {
    display: none
}

    .banner-head__slide:first-of-type {
        display: block
    }

.banner-head__entry {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 1
}

    .banner-head__entry.cover {
        position: relative;
        width: 100%;
        height: auto;
        z-index: 3
    }

        .banner-head__entry.cover:before {
            position: absolute;
            width: 100%;
            height: 60%;
            bottom: 0;
            clip-path: polygon(0 3%,100% 47%,100% 100%,0% 100%);
            background-color: var(--ihh-primary-blue);
            content: "";
            z-index: -1
        }

        .banner-head__entry.cover .cover--landscape {
            display: none
        }

        .banner-head__entry.cover .cover--portrait {
            display: block
        }

        .banner-head__entry.cover.cover--blue:before {
            background-color: var(--ihh-primary-blue)
        }

    .banner-head__entry.img {
        width: 200%;
        left: auto;
        right: 0
    }

    .banner-head__entry.text {
        display: flex;
        width: 100%;
        height: 60%;
        padding: 4.5rem 2.5rem 1.5rem;
        top: auto;
        bottom: 0;
        z-index: 4;
        color: #fff;
        flex-direction: column;
        justify-content: center;
        clip-path: polygon(0 0,100% 45%,100% 100%,0% 100%);
        row-gap: .5rem
    }

        .banner-head__entry.text > * {
            position: relative;
            margin: 0;
            will-change: left,opacity;
            line-height: 1.2
        }

        .banner-head__entry.text h2 {
            font-size: 2.6rem;
            line-height: .92
        }

        .banner-head__entry.text h4 {
            font-size: 1.5rem
        }

@media(max-width: 900px) {
    .banner-head img {
        height: auto;
        width: 100%
    }
}

@media(min-width: 500px) {
    .banner-head__entry.img {
        width: 100%
    }

    .banner-head__entry.text {
        width: 60%;
        height: 100%;
        padding: 1.5rem 1.5rem 1.5rem 5%;
        clip-path: polygon(0 0,50% 0,100% 100%,0 100%);
        color: #fff
    }

    .banner-head__entry.cover:before {
        width: 58%;
        height: 100%;
        clip-path: polygon(0 0,45% 0,100% 100%,0 100%);
        bottom: 10px
    }

    .banner-head__entry.cover .cover--portrait {
        display: none
    }

    .banner-head__entry.cover .cover--landscape {
        display: block
    }
}

@media(min-width: 768px) {
    .banner-head-v2__entry.text {
        row-gap: 1rem
    }

    .banner-head__entry.text h2 {
        font-size: 3.35rem
    }

    .banner-head__entry.text h4 {
        font-size: 2rem
    }
}

@media(min-width: 992px) {
    .banner-head__entry.text h2 {
        font-size: 3.8rem
    }

    .banner-head__entry.text h4 {
        font-size: 2.3rem
    }
}

@media(min-width: 1200px) {
    .banner-head-v2__entry.text {
        row-gap: 1.5rem
    }

    .banner-head-v2__entry.text {
        padding: 1.5rem 1.5rem 1.5rem 6%
    }

        .banner-head-v2__entry.text h2 {
            font-size: 4.45rem
        }

        .banner-head-v2__entry.text h4 {
            font-size: 2.4rem
        }
}

@media(min-width: 1400px) {
    .banner-head__entry.text h2 {
        font-size: 5.4rem
    }

    .banner-head__entry.text h4 {
        font-size: 2.7rem
    }
}

.banner-head__slide.slick-current .banner-head__entry.zoom_in {
    animation: in 7.5s ease-in-out forwards
}

.banner-head__slide.slick-current .banner-head__entry.zoom_out {
    animation: out 7.5s ease-in-out forwards
}

.banner-head__slide.slick-current .banner-head__entry.text > *:nth-child(4n+1) {
    animation: text 7.5s forwards
}

.banner-head__slide.slick-current .banner-head__entry.text > *:nth-child(4n+2) {
    animation: text2 7.5s forwards
}

.banner-head__slide.slick-current .banner-head__entry.text > *:nth-child(4n+3) {
    animation: text3 7.5s forwards
}

.banner-head__slide.slick-current .banner-head__entry.text > *:nth-child(4n+4) {
    animation: text4 7.5s forwards
}

.banner-head .slick-dots {
    position: absolute;
    left: 50%;
    bottom: 2rem;
    transform: translate(-50%,0);
    -webkit-transform: translate(-50%,0);
    z-index: 2;
    width: unset
}

.banner-head__arrows {
    position: absolute;
    max-width: 70rem;
    width: 100%;
    height: 4.6rem;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%)
}

    .banner-head__arrows .slick-arrow {
        position: absolute;
        padding: 1rem 1.25rem;
        left: 1.5rem;
        border: 0;
        border-radius: 20px;
        background: var(--ihh-primary-blue);
        height: unset;
        width: unset
    }

    .banner-head__arrows .slick-prev:before, .banner-head__arrows .slick-next:before {
        content: none !important
    }

    .banner-head__arrows .slick-arrow:after {
        position: relative;
        display: block;
        width: 1rem;
        height: 1rem;
        content: "";
        background-image: url("/images/ihhmylibraries/landing/carousel/icon-arrow-right-white.svg");
        background-size: cover;
        background-repeat: no-repeat
    }

    .banner-head__arrows .slick-arrow.slick-prev:after {
        background-image: url("/images/ihhmylibraries/landing/carousel/icon-arrow-left-white.svg")
    }

    .banner-head__arrows .slick-arrow.slick-next {
        left: auto;
        right: 1.5rem
    }