.single-hero-banner {
    position: relative;
}

.banner-container {
    position: relative;
    height: 0;
    padding-bottom: 40%;
    margin-bottom: 60px;
}

@media ( max-width: 1900px ) {
    .single-hero-banner .banner-container {
        padding-bottom: calc( 100svh - 60px );
    }

    .admin-bar .single-hero-banner .banner-container {
        padding-bottom: calc( 100svh - 92px );
    }
}

@media ( max-width: 782px ) {
    .admin-bar .single-hero-banner .banner-container {
        padding-bottom: calc( 100svh - 106px );
    }
}

.banner-container .single-hero-content {
    position: absolute;
    top: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}


.single-hero-banner.small-image .banner-container {
    padding-bottom: 0;
    height: auto;
}

.small-image .banner-container .single-hero-content {
    position: unset;
    top: unset;
    z-index: 1;
    width: 100%;
    height: auto;
}

.small-image .section-tag {
    display: none;
}

.small-image .banner-container .section-title-hero {
    width: 100%;
    text-align: center;
    margin: 0 auto;
    padding-top: 50px;
    padding-bottom: 0;
}

.small-image .banner-container .tags {
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.image-overlay .banner-container .single-hero-content {
    background-image: linear-gradient(to right, rgba( 255, 255, 255, 0.90 ) , rgba( 255, 255, 255, 0.22 ) );
}

.banner-container .single-hero-content .global-container-wide {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
    width: calc( 100% - 80px);
}

.small-image .banner-container .single-hero-content .global-container-wide {
    padding-top: 80px;
}

.small-image.show-show-breadcrumbs .banner-container .single-hero-content .global-container-wide {
    padding-top: 0;
}

@media ( max-width: 700px ) {
    .banner-container .single-hero-content .global-container-wide {
        width: calc( 100% - 40px);
    }

    .image-overlay .banner-container .single-hero-content {
        background-image: linear-gradient( transparent , rgba( 255, 255, 255, 0.80 ) );
    }

}


.banner-container .media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.banner-container .media-small-container {
    margin-top: 50px;
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: min( 33%, 600px );
}

.no-image .banner-container .media-small-container {
    margin-top: 0;
    padding-bottom: min(20%, 88px);
}

.banner-container .media-small-container .media-small {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    height: 100%;
    object-fit: cover;
}

.banner-container .section-title-hero {
    margin-top: 0;
    margin-bottom: 0;
    padding-bottom: 50px;
    max-width: 720px;
}

.slide-buttons {
    height: fit-content;
    display: flex;
    flex-wrap: wrap;
}

.slide-buttons a {
    margin-bottom: 20px;
}

.slide-buttons a:first-of-type {
    margin-right: 16px;
}

.single-hero-banner .breadcrumbs {
    background-color: white;
    display: none;
}

.single-hero-banner.show-show-breadcrumbs .breadcrumbs {
    display: block;
}

.single-hero-banner .breadcrumbs-bg {
    background-color: #47A7F01A;
    padding: 100px 0 30px 0;
}

.single-hero-banner .breadcrumbs .global-container-wide {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 4px 10px;
}

.single-hero-banner .breadcrumbs p {
    margin: 0;
    font-weight: 600;
}

.single-hero-banner .media,
.single-hero-banner .small-media {
    display: initial;
}

.single-hero-banner .mobile.media,
.single-hero-banner .mobile.media-small {
    display: none;
}

.small-image .banner-container .tags .category {
    width: 32px;
    height: 32px;
}


@media screen and ( max-width: 700px ) {

    .single-hero-banner .has-mobile-img .media,
    .single-hero-banner .has-mobile-img .small-media {
        display: none;
    }

    .single-hero-banner .mobile.media,
    .single-hero-banner .mobile.media-small {
        display: initial;
    }

    .single-hero-banner .breadcrumbs,
    .single-hero-banner.show-show-breadcrumbs .breadcrumbs {
        display: none;
    }

    .small-image .banner-container .single-hero-content .global-container-wide,
    .small-image.show-show-breadcrumbs .banner-container .single-hero-content .global-container-wide {
        padding-top: 80px;
    }

    .slide-buttons {
        padding-bottom: 40px;
    }


    .banner-container .single-hero-content .global-container-wide {
        justify-content: flex-end;
    }

    .small-image .banner-container .section-title-hero {
        text-align: unset;
    }

    .small-image .banner-container .media {
        height: 30%;
    }

    .small-image .banner-container .tags {
        margin-top: 2px;
        justify-content: flex-start;
        gap: 10px;
    }

    .small-image .banner-container .tags svg,
    .small-image .banner-container .tags .category {
        width: 24px;
        height: 24px;
    }


    .banner-container .media-small-container {
        margin-top: 32px;
    }

    .banner-container .section-title-hero {
        padding-bottom: 48px;
    }

    .small-image .banner-container .section-title-hero {
        padding-top: 32px;
    }

}


.single-hero-banner .support-button-container {
    position: absolute;
    bottom: 48px;
    left: calc( 50% + 620px ) ;
    transform: translateY(50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 4;
}

.single-hero-banner.no-image .support-button-container {
    left: calc( 50% + 420px );
}

.single-hero-banner .support-button-container.share {
    bottom: 0;
    transform: translateY(0);
}



.single-hero-banner .support-button-container svg path {
    fill: white
}


@media ( max-width: 1440px ) {
    .single-hero-banner .support-button-container,
    .single-hero-banner.no-image .support-button-container {
        left: calc( 100% - 100px );
    }
}

.single-hero-banner .support-button-container p {
    font-size: 18px;
    line-height: 28px;
    font-weight: 600;
    margin: 0;
    user-select: none;
}

.single-hero-banner.no-image .support-button-container.share.active p {
    color: white;
}

.single-hero-banner .support-button {
    border: 2px solid white;
    background-color: var(--wp--preset--color--green);
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

.single-hero-banner .share .support-button {
    background-color: var(--wp--preset--color--ice);
}

.single-hero-banner .share .support-button:not(:last-of-type) {
    margin-bottom: 6px;
}

.single-hero-banner .support-button svg {
    width: 24px;
    height: 24px;
    transform: translate(50%, 50%);
}

.single-hero-banner .share .support-button.close svg {
    transform: translate(50%, 50%) rotate(45deg);
    transition: transform 0.2s ease-in-out;
}

.single-hero-banner .share .support-button.close {
    z-index: 2;
}

.single-hero-banner .share.active .support-button.close svg {
    transform: translate(50%, 50%) rotate(90deg);
}

.single-hero-banner .share .support-button:not(.close) {
    position: absolute;
    top: 0;
    transition: top 0.2s ease-in-out;
}

.single-hero-banner .share.active .support-button.tw {
    top: -58px;
}
.single-hero-banner .share.active .support-button.fb {
    top: -116px;
}
.single-hero-banner .share.active .support-button.wp {
    top: -174px;
}
.single-hero-banner .share.active .support-button.mail{
     top: -232px;
 }

.single-hero-banner.no-image .share.active .support-button.tw {
    top: 58px;
}
.single-hero-banner.no-image .share.active .support-button.fb {
    top: 116px;
}
.single-hero-banner.no-image .share.active .support-button.wp {
    top: 174px;
}
.single-hero-banner.no-image .share.active .support-button.mail{
     top: 232px;
 }

.single-hero-banner .support-button:hover,
.single-hero-banner .support-button:active {
    scale: 1.1;
}

.single-hero-banner .supported .support-button {
    background-color: white;
    box-shadow: 0 0 10px -5px black;
}

.single-hero-banner .supported .support-button svg path {
    fill: var(--wp--preset--color--cherry);
}


@media screen and ( min-width: 700px ) and ( max-height: 740px ) {

    
    .single-hero-banner .section-tag {
       margin-bottom: 0;
    }

    .single-hero-banner .section-title-hero {
        font-size: 46px;
        line-height: 60px;
    }

}