.f-collection-page-header {
    position: relative;
    display: flex;
    align-items: var(--align-items);
    justify-content: center;
    overflow: hidden
}

.f-collection-page-header .f-parallax {
    position: absolute;
    inset: 0
}

.f-collection-page-header__background img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.f-collection-page-header__wrapper {
    position: relative;
    z-index: 8;
    display: flex;
    flex-direction: column
}

.f-collection-page-header__inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 60px;
    padding-right: 60px
}

@media screen and (max-width: 1023px) {
    .f-collection-page-header__inner {
        padding-left: 32px;
        padding-right: 32px
    }
}

@media screen and (max-width: 767px) {
    .f-collection-page-header__inner {
        padding-left: 24px;
        padding-right: 24px
    }
}

.f-collection-page-header__description {
    max-width: 750px;
    margin-top: 16px
}

.m\:text-center .f-collection-page-header__description {
    margin-left: auto;
    margin-right: auto
}

.m\:text-right .f-collection-page-header__description {
    margin-left: auto
}

.f-collection-page-header .f-breadcrumb {
    margin-bottom: 20px
}

@media screen and (max-width: 767px) {
    .f-collection-page-header .f-breadcrumb {
        margin-bottom: 12px
    }
}

.f-collection-page-header [data-enable-parallax=true] .f-collection-page-header__inner {
    padding-left: 0;
    padding-right: 0
}

.f-collection-page-header--image-background .f-collection-page-header__background {
    position: absolute;
    inset: 0;
    width: 100%;
    pointer-events: none
}

.f-collection-page-header--image-bottom .f-collection-page-header__wrapper {
    flex-direction: column-reverse
}

@media screen and (min-width: 768px) {
    .f-collection-page-header--image-right .f-collection-page-header__wrapper {
        flex-direction: row-reverse
    }
}

@media screen and (min-width: 768px)and (min-width: 768px) {
    .f-collection-page-header--image-right .f-collection-page-header__background {
        flex: 0 0 50%
    }
}

@media screen and (min-width: 768px) {
    .f-collection-page-header--image-right .f-collection-page-header__inner {
        flex: 1
    }
}

@media screen and (min-width: 768px) {
    .f-collection-page-header--image-left .f-collection-page-header__wrapper {
        flex-direction: row
    }
}

@media screen and (min-width: 768px)and (min-width: 768px) {
    .f-collection-page-header--image-left .f-collection-page-header__background {
        flex: 0 0 50%
    }
}

@media screen and (min-width: 768px) {
    .f-collection-page-header--image-left .f-collection-page-header__inner {
        flex: 1
    }
}