.pgi-stack {
    --pgi-stack-closed-height: 120px;
    --pgi-stack-open-height: 880px;
    --pgi-stack-bottom-offset: 40px;
    width: 100%;
    margin: 0;
    padding: 140px 60px;
    padding-left: 0px;
    padding-top: 10px;
    background: var(--pgi-white);
    color: var(--pgi-black);
    font-family: "Involve", system-ui, sans-serif;
}

.pgi-stack__inner {
    display: flex;
    flex-direction: column;
    gap: 60px;
    width: min(100%, var(--pgi-container, 1800px));
    margin-inline: auto;
}

.pgi-stack__headline {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.pgi-stack__headline-icon {
    width: 24px;
    height: 45px;
    flex: 0 0 24px;
    background: rgba(45, 95, 103, 0.4);
    clip-path: polygon(34% 0, 100% 33%, 66% 50%, 100% 67%, 34% 100%, 0 83%, 48% 58%, 0 33%);
}

.pgi-stack__heading {
    margin: 0;
    color: var(--pgi-black);
    font-size: 40px;
    font-weight: 600;
    line-height: 1.1;
}

.pgi-stack__slides {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.pgi-stack__slide {
    position: relative;
    min-height: var(--pgi-stack-closed-height);
    height: var(--pgi-stack-open-height);
    overflow: hidden;
    isolation: isolate;
    background: var(--pgi-white);
}

.pgi-stack.is-js .pgi-stack__slide {
    min-height: var(--pgi-stack-effective-closed-height, var(--pgi-stack-closed-height));
    height: var(--pgi-stack-current-height, var(--pgi-stack-effective-closed-height, var(--pgi-stack-closed-height)));
    will-change: height;
}

.pgi-stack.is-js {
    position: relative;
    min-height: var(--pgi-stack-scroll-height, auto);
}

.pgi-stack.is-js .pgi-stack__inner {
    transform: translate3d(0, var(--pgi-stack-current-offset, 0px), 0);
    will-change: transform;
}

.pgi-stack.is-fixed .pgi-stack__inner {
    position: fixed;
    top: var(--pgi-stack-sticky-top, 40px);
    left: var(--pgi-stack-fixed-left, 0px);
    z-index: 2;
    width: var(--pgi-stack-fixed-width, auto);
}

.pgi-stack.is-complete .pgi-stack__inner {
    position: absolute;
    top: var(--pgi-stack-complete-top, 0px);
    left: var(--pgi-stack-absolute-left, 0px);
    width: var(--pgi-stack-fixed-width, auto);
}

.pgi-stack__background {
    position: absolute;
    left: 0;
    bottom: 8%;
    z-index: 1;
    width: min(380px, 28vw);
}

.pgi-stack__background img {
    width: 100%;
    height: auto;
}

.pgi-stack__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pgi-stack__content {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(280px, 430px) minmax(0, 1fr);
    gap: 80px;
    height: var(--pgi-stack-open-height);
    padding: 20px 0;
}

.pgi-stack__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
    width: 100%;
    max-width: 430px;
}

.pgi-stack__count {
    color: rgba(45, 95, 103, 0.6);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
}

.pgi-stack__title {
    margin: 0;
    color: var(--pgi-black);
    font-size: 32px;
    font-weight: 600;
    line-height: 1.3;
}

.pgi-stack__subtitle {
    max-width: 378px;
    margin: 0;
    color: #80807d;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
}

.pgi-stack__images {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 20px;
    min-width: 0;
    height: 760px;
}

.pgi-stack__image {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    border-radius: 20px;
    background: #f6f6f6;
}

.pgi-stack__image--one,
.pgi-stack__image--two {
    height: 100%;
}

.pgi-stack__slide--format-left_smaller .pgi-stack__images {
    grid-template-columns: minmax(168px, 0.38fr) minmax(0, 1fr);
}

.pgi-stack__slide--format-left_smaller .pgi-stack__image--one,
.pgi-stack__slide--format-right_smaller .pgi-stack__image--two {
    aspect-ratio: 1;
    height: auto;
}

.pgi-stack__slide--format-right_smaller .pgi-stack__images {
    grid-template-columns: minmax(0, 1fr) minmax(168px, 0.38fr);
}

.pgi-stack__slide--single-image .pgi-stack__images {
    grid-template-columns: 1fr;
}

.pgi-stack__slide--single-image .pgi-stack__image {
    height: 100%;
}

@media (max-width: 1200px) {
    .pgi-stack {
        padding: 100px 30px;
    }

    .pgi-stack__content {
        grid-template-columns: minmax(220px, 32%) minmax(0, 1fr);
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .pgi-stack {
        padding: 49px 10px;
    }

    .pgi-stack__inner {
        gap: 34px;
    }

    .pgi-stack__headline {
        gap: 12px;
    }

    .pgi-stack__headline-icon {
        width: 16px;
        height: 30px;
        flex-basis: 16px;
    }

    .pgi-stack__heading {
        font-size: 28px;
    }

    .pgi-stack__slides {
        gap: 34px;
    }

    .pgi-stack__slide,
    .pgi-stack.is-js .pgi-stack__slide {
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    .pgi-stack.is-js {
        min-height: 0;
    }

    .pgi-stack.is-js .pgi-stack__inner {
        position: static;
    }

    .pgi-stack__content {
        display: flex;
        flex-direction: column;
        gap: 20px;
        height: auto;
        padding: 0;
    }

    .pgi-stack__text {
        gap: 10px;
        max-width: none;
    }

    .pgi-stack__count {
        font-size: 14px;
        letter-spacing: 1px;
    }

    .pgi-stack__title {
        font-size: 18px;
        line-height: 1.25;
        padding-bottom: 5px;
    }

    .pgi-stack__subtitle {
        max-width: none;
        font-size: 14px;
    }

    .pgi-stack__images,
    .pgi-stack__slide--format-left_smaller .pgi-stack__images,
    .pgi-stack__slide--format-right_smaller .pgi-stack__images {
        grid-template-columns: minmax(0, 0.34fr) minmax(0, 0.66fr);
        gap: 16px;
        height: auto;
    }

    .pgi-stack__image,
    .pgi-stack__slide--format-left_smaller .pgi-stack__image--one,
    .pgi-stack__slide--format-right_smaller .pgi-stack__image--two,
    .pgi-stack__slide--single-image .pgi-stack__image {
        aspect-ratio: 1;
        height: auto;
        border-radius: 8px;
    }

    .pgi-stack__slide--single-image .pgi-stack__images {
        grid-template-columns: minmax(0, 1fr);
    }

    .pgi-stack__slide--format-left_smaller .pgi-stack__image.pgi-stack__image--two,
    .pgi-stack__slide--format-right_smaller .pgi-stack__image--one {
        aspect-ratio: 0.924;
    }

    .pgi-stack__slide--format-right_smaller .pgi-stack__images {
        grid-template-columns: minmax(0, 0.66fr) minmax(0, 0.34fr);
    }

    .pgi-stack__slide--format-same .pgi-stack__image--one {
        aspect-ratio: 0.48;
    }

    .pgi-stack__slide--format-same .pgi-stack__image--two {
        aspect-ratio: 0.92;
    }

    .pgi-stack__slide--single-image .pgi-stack__image--one {
        aspect-ratio: 1.47;
    }

}
@media (min-width: 769px) and (max-width: 1499px) {
    .pgi-stack {
        padding: 80px;
        gap: 35.2px;
    }

    .pgi-stack__heading {
        font-size: clamp(25.6px, 2.04vw, 32px);
    }

    .pgi-stack__slides {
        gap: 0;
    }

    .pgi-stack__slide-title {
        font-size: clamp(19.2px, 1.64vw, 25.6px);
    }

    .pgi-stack__slide-media {
        height: 496px;
    }
}

/* PGI middle-desktop client font-size normalization */
@media (min-width: 769px) and (max-width: 1499px) {
    .pgi-stack__heading {
        font-size: 24px;
    }

    .pgi-stack__count {
        font-size: 13px;
    }

    .pgi-stack__slide-title {
        font-size: 18px;
    }

    .pgi-stack__subtitle {
        font-size: 14px;
    }
}