.progress-slider {
    --progress-slider-transition: 1s;
}

.progress-slider__title {
    width: 100%;
}

.progress-slider__row {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    gap: 24rem;
}

.progress-slider__row:not(:first-child) {
    margin-top: 24rem;
}

.progress-slider__tags {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 16rem;
    width: 100%;
}

.progress-slider__tags li {
    background-color: var(--color-gray-100);
    border-radius: var(--border-radius);
    font-weight: 500;
    font-size: 16rem;
    line-height: 24rem;
    padding: 16rem 24rem;
}

.progress-slider__tags li:has(> img) {
    position: relative;
    padding-left: 60rem;
}

.progress-slider__tags li > img {
    width: 24rem;
    height: 24rem;
    position: absolute;
    top: 50%;
    left: 24rem;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    -o-object-fit: contain;
       object-fit: contain;
}

.progress-slider__tags-wrapper > .progress-slider__tags {
    display: none;
}

.progress-slider__tags-wrapper > .progress-slider__tags:last-child {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.progress-slider__media {
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius-lg);
    border: 1rem solid #e7e7e7;
    background: var(--color-gray-100) url('/wp-content/themes/build/assets/img/progress-slider/media/bg.svg')
        center/contain no-repeat;
    padding-top: 79.8387096774%;
}

.progress-slider__media-images {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.progress-slider__media-images img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -o-object-fit: contain;
       object-fit: contain;
    -webkit-transition: opacity var(--progress-slider-transition);
    transition: opacity var(--progress-slider-transition);
}

.progress-slider__media-images img:not(.active) {
    opacity: 0;
}

.progress-slider__media-markers {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.progress-slider__media-marker {
    width: 10rem;
    height: 10rem;
    position: relative;
    background-color: var(--color-pink);
    border-radius: 50%;
    -webkit-transition: background-color var(--progress-slider-transition);
    transition: background-color var(--progress-slider-transition);
}

.progress-slider__media-marker:before,
.progress-slider__media-marker:after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%) scale(0);
        -ms-transform: translate(-50%, -50%) scale(0);
            transform: translate(-50%, -50%) scale(0);
    z-index: -1;
    opacity: 0;
    background-color: var(--color-pink);
    border-radius: inherit;
    -webkit-transition: background-color var(--progress-slider-transition);
    transition: background-color var(--progress-slider-transition);
}

.progress-slider__media-marker:before {
    opacity: 0.14;
    -webkit-animation: marker-wave-pulse-before 2.4s infinite;
            animation: marker-wave-pulse-before 2.4s infinite;
}

.progress-slider__media-marker:after {
    opacity: 0.04;
    -webkit-animation: marker-wave-pulse-after 2.4s infinite;
            animation: marker-wave-pulse-after 2.4s infinite;
}

.progress-slider__media-markers > .progress-slider__media-marker {
    position: absolute;
}

.progress-slider__media-markers > .progress-slider__media-marker:nth-child(1) {
    top: 7.071%;
    left: 54.436%;
}

.progress-slider__media-markers > .progress-slider__media-marker:nth-child(1):before {
    -webkit-animation-delay: 0s;
            animation-delay: 0s;
}

.progress-slider__media-markers > .progress-slider__media-marker:nth-child(1):after {
    -webkit-animation-delay: 0.4s;
            animation-delay: 0.4s;
}

.progress-slider__media-markers > .progress-slider__media-marker:nth-child(2) {
    top: 17.677%;
    left: 45.968%;
}

.progress-slider__media-markers > .progress-slider__media-marker:nth-child(2):before {
    -webkit-animation-delay: 0.6s;
            animation-delay: 0.6s;
}

.progress-slider__media-markers > .progress-slider__media-marker:nth-child(2):after {
    -webkit-animation-delay: 1s;
            animation-delay: 1s;
}

.progress-slider__media-markers > .progress-slider__media-marker:nth-child(3) {
    top: 41.667%;
    left: 55.444%;
}

.progress-slider__media-markers > .progress-slider__media-marker:nth-child(3):before {
    -webkit-animation-delay: 1.2s;
            animation-delay: 1.2s;
}

.progress-slider__media-markers > .progress-slider__media-marker:nth-child(3):after {
    -webkit-animation-delay: 1.6s;
            animation-delay: 1.6s;
}

.progress-slider__media-markers > .progress-slider__media-marker:nth-child(4) {
    top: 65.91%;
    left: 42.339%;
}

.progress-slider__media-markers > .progress-slider__media-marker:nth-child(4):before {
    -webkit-animation-delay: 1.8s;
            animation-delay: 1.8s;
}

.progress-slider__media-markers > .progress-slider__media-marker:nth-child(4):after {
    -webkit-animation-delay: 2.2s;
            animation-delay: 2.2s;
}

.progress-slider__media:has(.progress-slider__media-images > img:last-child.active) .progress-slider__media-marker {
    background-color: var(--color-primary);
}

.progress-slider__media:has(.progress-slider__media-images > img:last-child.active)
    .progress-slider__media-marker:before,
.progress-slider__media:has(.progress-slider__media-images > img:last-child.active)
    .progress-slider__media-marker:after {
    background-color: var(--color-primary);
}

.progress-slider__content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 24rem;
    width: 100%;
    background-color: var(--color-gray-100);
    border-radius: var(--border-radius-lg);
    padding: 24rem 16rem;
}

.progress-slider__content-main {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 24rem;
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
}

.progress-slider__content-wrapper > .progress-slider__content {
    display: none;
}

.progress-slider__content-wrapper > .progress-slider__content:last-child {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.progress-slider__text {
    font-weight: 300;
    font-size: 18rem;
    line-height: 24rem;
    color: #525252;
}

.progress-slider__text strong {
    font-weight: 600;
    color: var(--color-gray-900);
}

.progress-slider__description {
    font-weight: 300;
    font-size: 14rem;
    line-height: 20rem;
}

.progress-slider__description strong {
    font-weight: 700;
}

.progress-slider__button:before {
    -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
            transform: rotate(180deg);
}

.progress-section {
    padding: var(--section-padding-y) 0;
}

.progress-section + .section.section--default {
    padding-top: 0;
}

.section.section--default:has(+ .progress-section) {
    padding-bottom: 0;
}

@-webkit-keyframes marker-wave-pulse-before {
    0% {
        -webkit-transform: translate(-50%, -50%) scale(0);
                transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }

    10% {
        opacity: 0.14;
    }

    50% {
        -webkit-transform: translate(-50%, -50%) scale(2);
                transform: translate(-50%, -50%) scale(2);
        opacity: 0.14;
    }

    100% {
        -webkit-transform: translate(-50%, -50%) scale(2);
                transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }
}

@keyframes marker-wave-pulse-before {
    0% {
        -webkit-transform: translate(-50%, -50%) scale(0);
                transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }

    10% {
        opacity: 0.14;
    }

    50% {
        -webkit-transform: translate(-50%, -50%) scale(2);
                transform: translate(-50%, -50%) scale(2);
        opacity: 0.14;
    }

    100% {
        -webkit-transform: translate(-50%, -50%) scale(2);
                transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }
}

@-webkit-keyframes marker-wave-pulse-after {
    0% {
        -webkit-transform: translate(-50%, -50%) scale(0);
                transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }

    10% {
        opacity: 0.04;
    }

    25% {
        -webkit-transform: translate(-50%, -50%) scale(2);
                transform: translate(-50%, -50%) scale(2);
        opacity: 0.04;
    }

    50% {
        -webkit-transform: translate(-50%, -50%) scale(2.8);
                transform: translate(-50%, -50%) scale(2.8);
        opacity: 0.04;
    }

    100% {
        -webkit-transform: translate(-50%, -50%) scale(2.8);
                transform: translate(-50%, -50%) scale(2.8);
        opacity: 0;
    }
}

@keyframes marker-wave-pulse-after {
    0% {
        -webkit-transform: translate(-50%, -50%) scale(0);
                transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }

    10% {
        opacity: 0.04;
    }

    25% {
        -webkit-transform: translate(-50%, -50%) scale(2);
                transform: translate(-50%, -50%) scale(2);
        opacity: 0.04;
    }

    50% {
        -webkit-transform: translate(-50%, -50%) scale(2.8);
                transform: translate(-50%, -50%) scale(2.8);
        opacity: 0.04;
    }

    100% {
        -webkit-transform: translate(-50%, -50%) scale(2.8);
                transform: translate(-50%, -50%) scale(2.8);
        opacity: 0;
    }
}

@media screen and (min-width: 768px) {
    .progress-slider__row:not(:first-child) {
        margin-top: 32rem;
    }
}

@media screen and (min-width: 1024px) and (orientation: landscape) {
    .progress-slider__header {
        position: relative;
    }

    .progress-slider__header > .progress-slider__title {
        -webkit-transition:
            visibility var(--progress-slider-transition),
            opacity var(--progress-slider-transition);
        transition:
            visibility var(--progress-slider-transition),
            opacity var(--progress-slider-transition);
    }

    .progress-slider__header > .progress-slider__title:not(.active) {
        visibility: hidden;
        opacity: 0;
    }

    .progress-slider__header > .progress-slider__title:not(:first-child) {
        position: absolute;
        top: 0;
        left: 0;
    }

    .progress-slider__row {
        -ms-grid-columns: 288rem 1fr 392rem;
        grid-template-columns: 288rem 1fr 392rem;
    }

    .progress-slider__tags-wrapper {
        position: relative;
        -webkit-box-ordinal-group: 0;
            -ms-flex-order: -1;
                order: -1;
    }

    .progress-slider__tags-wrapper > .progress-slider__tags {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    .progress-slider__tags-wrapper > .progress-slider__tags {
        height: 100%;
        max-height: 100%;
        overflow-y: auto;
        position: absolute;
        top: 0;
        left: 0;
        -webkit-transition:
            visibility var(--progress-slider-transition),
            opacity var(--progress-slider-transition),
            -webkit-transform var(--progress-slider-transition);
        transition:
            visibility var(--progress-slider-transition),
            opacity var(--progress-slider-transition),
            -webkit-transform var(--progress-slider-transition);
        transition:
            visibility var(--progress-slider-transition),
            opacity var(--progress-slider-transition),
            transform var(--progress-slider-transition);
        transition:
            visibility var(--progress-slider-transition),
            opacity var(--progress-slider-transition),
            transform var(--progress-slider-transition),
            -webkit-transform var(--progress-slider-transition);
    }

    .progress-slider__tags-wrapper > .progress-slider__tags:not(.active) {
        visibility: hidden;
        opacity: 0;
        -webkit-transform: translateY(100%);
            -ms-transform: translateY(100%);
                transform: translateY(100%);
    }

    .progress-slider__tags-wrapper > .progress-slider__tags:has(+ .progress-slider__tags.active) {
        -webkit-transform: translateY(-100%);
            -ms-transform: translateY(-100%);
                transform: translateY(-100%);
    }

    .progress-slider:not(.active) .progress-slider__tags-wrapper > .progress-slider__tags:first-child {
        -webkit-transform: translateY(48rem);
            -ms-transform: translateY(48rem);
                transform: translateY(48rem);
    }

    .progress-slider__content-wrapper {
        position: relative;
    }

    .progress-slider__content-wrapper > .progress-slider__content {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        -webkit-transition:
            visibility var(--progress-slider-transition),
            opacity var(--progress-slider-transition),
            -webkit-transform var(--progress-slider-transition);
        transition:
            visibility var(--progress-slider-transition),
            opacity var(--progress-slider-transition),
            -webkit-transform var(--progress-slider-transition);
        transition:
            visibility var(--progress-slider-transition),
            opacity var(--progress-slider-transition),
            transform var(--progress-slider-transition);
        transition:
            visibility var(--progress-slider-transition),
            opacity var(--progress-slider-transition),
            transform var(--progress-slider-transition),
            -webkit-transform var(--progress-slider-transition);
    }

    .progress-slider__content-wrapper > .progress-slider__content:not(.active) {
        visibility: hidden;
        opacity: 0;
        -webkit-transform: translateY(100%);
            -ms-transform: translateY(100%);
                transform: translateY(100%);
    }

    .progress-slider__content-wrapper > .progress-slider__content:has(+ .progress-slider__content.active) {
        -webkit-transform: translateY(-100%);
            -ms-transform: translateY(-100%);
                transform: translateY(-100%);
    }

    .progress-slider:not(.active) .progress-slider__content-wrapper > .progress-slider__content:first-child {
        -webkit-transform: translateY(48rem);
            -ms-transform: translateY(48rem);
                transform: translateY(48rem);
    }

    .progress-slider__content-wrapper > .progress-slider__content-main {
        max-height: 278rem;
        overflow-y: auto;
    }
}

@media (hover: hover) {
    .progress-slider__button:not([disabled]):hover:before {
        -webkit-transform: rotate(180deg) translateX(100%);
            -ms-transform: rotate(180deg) translateX(100%);
                transform: rotate(180deg) translateX(100%);
    }
}