.page-heading {
    background-color: var(--main-200);
    & .is--standard {
        padding: 16px 32px 64px 32px;
        @media (max-width: 1200px) { & {
            padding: 48px 16px 16px 16px;
        }}
    }
    & .section__desc {
        padding-top: 32px;
        @media (max-width: 1200px) { & {
            padding-top: 16px;
        }}
    }
}

.container > * {
    width: 100%;
}

.full-width.is--align-left > .container,
.agile-columns.is--align-left > .container,
.boxes.is--align-left > .container,
.accordion.is--align-left > .container {
    text-align: left;
	justify-items: start;
}

.full-width.is--align-center > .container,
.agile-columns.is--align-center > .container,
.boxes.is--align-center > .container,
.accordion.is--align-center > .container {
    text-align: center;
	justify-items: center;
}

.full-width.is--align-right > .container,
.agile-columns.is--align-right > .container
.boxes.is--align-right > .container,
.accordion.is--align-right > .container {
    text-align: right;
	justify-items: end;
}

.full-width > div,
.agile-columns > div,
.boxes > div .section__content,
.accordion > div .section__content {
    display: grid;
	gap: 64px;
	@media (max-width: 768px) { & {
        gap: 32px;
    }}
}

.agile-columns {
    & .section__column {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    & .agile-columns-container__desc {
        & ul {
            list-style-type: none;
            padding-left: 0;
        }
        & h3:not(:last-child),
        & h4:not(:last-child),
        & p:not(:last-child),
        & li:not(:last-child) {
            margin-bottom: 16px;
        }
    }
    & .agile-columns-container__box {
        & .agile-columns-container__icon {
            display: flex;
            align-items: center;
        }
        & .agile-columns-container__icon > svg {
            width: 24px;
            height: 24px;
            margin-right: 16px;
            flex: 0 0 24px;
            & path {
                fill: var(--main-900);
            }
        }
    }
}

.boxes {
    & .section__column {
        & > .section__inner > *:not(:last-child) {
            padding-bottom: 16px;
        }
        & img {
            display: inline-block;
        }
    }
    & .is--wide {
        & .section__column:nth-child(2n+1) .section__img,
        & .section__column:nth-child(2n) .section__img {
            margin: 0;
        }
    }
    & .is--selected_boxes,
    & .is--auto_boxes,
    & .is--blog_boxes {
        & .section__img img {
            aspect-ratio: 4 / 3;
            object-fit: cover;
            height: 100%;
        }
    }
}

.accordion {
    & .section__content {
        width: 100%;
    }
    & .section__inner {
        padding-top: 16px;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    & summary {
        list-style-type: none;
        position: relative;
        & .section__header {
            max-width: calc(100% - 32px);
            font-weight: 700;
        }
    }
    & details[open] > summary::after {
        content: '';
        position: absolute;
        top: 22%;
        right: 0;
        background-repeat: no-repeat;
        width: 16px;
        height: 16px;
        z-index: 100;
        background-image: url(../assets/img/accordeon-close.svg);
    }
    & details > summary::before {
        content: '';
        position: absolute;
        top: 22%;
        right: 0;
        background-repeat: no-repeat;
        width: 16px;
        height: 16px;
        z-index: 100;
        background-image: url(../assets/img/accordeon-open.svg);
    }
    & details[open] > summary::before {
        display: none;
    }
}

.multi {
    & .multi__grid {
        display: grid;
        grid-template-columns: 1fr;
        .is--align-left {
            justify-items: start;
        }
        .is--align-center {
            justify-items: center;
        }
        .is--align-right {
            justify-items: end;
        }
    }
    & .multi__full {
        display: grid;
        grid-template-columns: 1fr;
        gap: 32px;;
    }
    & .multi__columns--2 {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        @media (max-width: 768px) { & {
            grid-template-columns: repeat(1, minmax(0, 1fr));
        }}
        & .multi__column {
            gap: 32px;
        }
    }
    @media (max-width: 768px) { & {
        .is--reverse .multi__column:nth-child(1) {
            order: 2;
        }
        .is--reverse .multi__column:nth-child(2) {
            order: 1;
        }
    }}
    & .multi__columns--3 {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        @media (max-width: 768px) { & {
            grid-template-columns: repeat(1, minmax(0, 1fr));
        }}
        & .multi__column {
            gap: 24px;
        }
    }
    & .multi__columns--4 {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        @media (max-width: 1024px) { & {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }}
        @media (max-width: 576px) { & {
            grid-template-columns: repeat(1, minmax(0, 1fr));
        }}
        & .multi__column {
            gap: 16px;
        }
    }   
    & .is--wide:not(.multi__full) {
        & .section__buttons > div {
            @media (max-width: 1400px) { & {
                gap: 24px;
            }}
            @media (max-width: 1200px) { & {
                flex-direction: column;
                gap: 16px;
            }}
        }
        &.multi__columns--2 {
            & .multi__column:first-child.is--multi-full-img {
                & .section__img {
                    margin-left: -32px;
                    @media (max-width: 1200px) { & {
                        margin-left: -16px;
                    }}
                    @media (max-width: 768px) { & {
                        margin-right: -16px;
                    }}
                }
            }
            .multi__column:last-child.is--multi-full-img {
                & .section__img {
                    margin-right: -32px;
                    @media (max-width: 1200px) { & {
                        margin-right: -16px;
                    }}
                    @media (max-width: 768px) { & {
                        margin-left: -16px;
                    }}
                }
            }
            @media (max-width: 768px) {
                &.is--reverse .multi__column:nth-child(1) {
                    order: 2;
                }
                
                &.is--reverse .multi__column:nth-child(2) {
                    order: 1;
                }
            }
        }
        &.multi__columns--3 {
            & .multi__column.is--multi-full-img {
                & .section__img {
                    @media (max-width: 768px) { & {
                        margin-left: -16px;
                        margin-right: -16px;
                    }}
                }
            }
        }
        &.multi__columns--4 {
            & .multi__column.is--multi-full-img {
                & .section__img {
                    @media (max-width: 578px) { & {
                        margin-left: -16px;
                        margin-right: -16px;
                    }}
                }
            }
        }
    }
    & .is--standard:not(.multi__full) {
        & .section__buttons > div {
            gap: 24px;
            @media (max-width: 1600px) { & {
                flex-direction: column;
                gap: 16px;
            }}
        }
        &.multi__columns--2 {
            & .is--multi-full-img .section__img {
                width: calc(100svw / 2);
                @media (max-width: 768px) { & {
                    width: 100svw;
                }}
            }
            
            @media (min-width: 769px) {
                &.is--gap-8 .is--multi-full-img .section__img {
                    width: calc((100svw - 8px) / 2);
                }
                &.is--gap-16 .is--multi-full-img .section__img,
                &.is--gap-24 .is--multi-full-img .section__img,
                &.is--gap-32 .is--multi-full-img .section__img {
                    width: calc((100svw - 16px) / 2);
                }
                &.is--gap-64 .is--multi-full-img .section__img {
                    width: calc((100svw - 32px) / 2);
                }
            }
            
            @media (min-width: 1201px) {
                &.is--gap-24 .is--multi-full-img .section__img {
                    width: calc((100svw - 24px) / 2);
                }
                &.is--gap-32 .is--multi-full-img .section__img {
                    width: calc((100svw - 32px) / 2);
                }
                &.is--gap-64 .is--multi-full-img .section__img {
                    width: calc((100svw - 64px) / 2);
                }
            }
            
            & .is--multi-full-img.multi__column .section__img {
                @media (max-width: 768px) { & {
                    margin-left: -16px;
                }}
            }
            
            & .is--multi-full-img.multi__column:first-child .section__img {
                margin-left: calc((0px - ((100svw - 1400px)/2)) - 32px);
                @media (max-width: 1600px) { & {
                    margin-left: calc((0px - ((100svw - 1200px)/2)) - 32px);
                }}
                @media (max-width: 1200px) { & {
                    margin-left: -16px;
                }}
            }
        }
    }
    & .is--narrow:not(.multi__full) {
        & .section__buttons > div {
            flex-direction: column;
            gap: 16px;
        }
        &.multi__columns--2 {
            & .is--multi-full-img.multi__column:first-child .section__img {
                margin-left: calc(((-100svw + 700px) / 2) - 32px);
                @media (max-width: 1200px) { & {
                    margin-left: calc(0px - ((100svw - 700px) / 2) - 16px);
                }}
                @media (max-width: 768px) { & {
                    margin-left: calc(0px - ((100svw - 700px) / 2) - 16px);
                    margin-right: calc(0px - ((100svw - 700px) / 2) - 16px);
                }}
                @media (max-width: 700px) { & {
                    margin-left: -16px;
                    margin-right: -16px;
                }}
            }
            & .is--multi-full-img.multi__column:last-child .section__img {
                margin-right: calc(((-100svw + 700px) / 2) - 32px);
                @media (max-width: 1200px) { & {
                    margin-right: calc(0px - ((100svw - 700px) / 2) - 16px);
                }}
                @media (max-width: 768px) { & {
                    margin-left: calc(0px - ((100svw - 700px) / 2) - 16px);
                    margin-right: calc(0px - ((100svw - 700px) / 2) - 16px);
                }}
                @media (max-width: 700px) { & {
                    margin-left: -16px;
                    margin-right: -16px;
                }}
            }
        }
    }
    & .multi__column {
        display: grid;
        grid-template-columns: 1fr;
    }
    & .multi_boxes {
        & .section__column {
            & > .section__inner > *:not(:last-child) {
                padding-bottom: 16px;
            }
            & img {
                display: inline-block;
            }
        }
        &.is--wide {
            & .section__column:nth-child(2n+1) .section__img,
            & .section__column:nth-child(2n) .section__img {
                margin: 0;
            }
        }
        &.is--selected_boxes,
        &.is--auto_boxes,
        &.is--blog_boxes {
            & .section__img img {
                aspect-ratio: 4 / 3;
                object-fit: cover;
                height: 100%;
            }
        }
    }
}

.hero {
    position: relative;
    & .section__column {
        position: relative;
    }
    & .container.is--wide {
        padding: 0;
    }
    & .is--wide {
        & .section__column:nth-child(2n) .section__img,
        & .section__column:nth-child(2n+1) .section__img {
            margin: 0;
        }
    }
    & .section__img img {
        aspect-ratio: 3 / 1;
        object-fit: cover;
        object-position: center;
        width: 100%;
        @media (max-width: 1200px) { & {
            aspect-ratio: 2 / 1;
        }}
        @media (max-width: 768px) { & {
            aspect-ratio: 16 / 9;
        }}
        @media (max-width: 576px) { & {
            aspect-ratio: 4 / 3;
        }}
    }
    & .slick-arrow {
        background-color: var(--btn-dark);
        z-index: 300;
        padding: 24px;
        transition: all .5s;
    }
    &:not(:hover) .slick-arrow {
        display: none !important;
    }
    & .slick-prev {
        left: 12px;
    }
    & .slick-next {
        right: 12px;
    }
    & .slick-arrow.slick-prev::before, & .slick-arrow.slick-next::before {
        position: absolute;
        display: inline-block;
        width: 48px;
        height: 48px;
        left: -12px;
        top: -12px;
    }
    & .slick-arrow.slick-prev::before {
        content: url(../assets/img/chevron-prev.svg);
    }
    & .slick-arrow.slick-next::before {
        content: url(../assets/img/chevron-next.svg);
    }
    & .section__content {
        position: relative;
    }
    & .section__items {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 8px;
        padding: 16px 96px;
        z-index: 200;
        @media (max-width: 1200px) { & {
            padding: 16px 64px;
        }}
    }
    & .section__header,
    & .section__desc {
        color: var(--main-900);
    }
    & .section__button {
        margin-top: 24px;
    }
}

.main {
    overflow: hidden;
    &.is--pt {
        padding-top: 32px;
    }
    &.is--pb {
        padding-bottom: 32px;
    }
    & .section__columns--2 {
        @media (max-width: 1200px) { & {
            grid-template-columns: repeat(1, minmax(0, 1fr));
        }}
    }
    & .container > .section__img {
        position: absolute;
        bottom: 0;
        width: 25%;
        right: calc(100svw / 2);
        @media (min-width: 1921px) { & {
            width: 20%; 
        }}
        @media (min-width: 2561px) { & {
            width: 15%; 
        }}
        @media (max-width: 1200px) { & {
            display: none;
        }}
        @media (max-width: 1600px) { & {
            width: 30%;
        }}
    }
    & .section__column:first-child {
        padding-top: 64px;
        z-index: 1;
        & .section__header {
            @media (min-width: 1201px) { & {
                max-width: 82%;
            }}
            @media (min-width: 1601px) { & {
                max-width: 76%;
            }}
        }
        & .section__desc {
            padding-top: 32px;
            font-size: 1.2rem;
            max-width: 70%;
            @media (max-width: 1600px) { & {
                max-width: 45%;
            }}
            @media (max-width: 1200px) { & {
                max-width: unset;
            }}
        }
    }
    & .section__column:last-child {
        @media (min-width: 1201px) {
            padding: 0 32px;
        }
        @media (min-width: 1601px) {
            padding: 0 96px;
        }
        @media (max-width: 1200px) {
            gap: 0;
        }
        & .section__img {
            max-width: 500px;
            margin: 0 auto;
            @media (min-width: 1201px) { & {
                display: none;
            }}
        }
    }
    & .se-left.section__column:last-child {
        @media (max-width: 1200px) {
            transform: translateX(0);
            opacity: 1;
        }
    }
    & .se-left.se-done.section__column:last-child {
        @media (max-width: 1200px) {
            transform: translateY(0);
            opacity: 1;
        }
    }
    & .section__list {
        list-style: none;
        padding-left: 0;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    & .section__list-element {
        display: flex;
        align-items: center;
        gap: 12px;
        & > *:not(:last-child) {
            margin-bottom: 0;
        }
    }
    & .wpcf7 {
        background-color: #8D0006;
        color: var(--main-100);
        padding: 32px;
    }
    & .wpcf7 p:not(:last-child) {
        margin-bottom: 0;
    }
    & .wpcf7-form {
        & > p {
            display: flex;
            flex-direction: column;
            gap: 16px;
            & br {
                display: none;
            }
        } 
        & input.wpcf7-form-control,
        & textarea.wpcf7-form-control {
            border: 1px solid var(--main-100);
            background-color: var(--main-100);
            padding: 12px;
        }
        & .wpcf7-form__consent-text {
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            transition: all .3s ease;
        }
        
        & .wpcf7-form__consent-text.is--expanded {
            -webkit-line-clamp: unset;
        }
        
        & .wpcf7-form__consent-toggle {
            margin-top: 5px;
            cursor: pointer;
            background: none;
            border: none;
            padding: 0;
            color: var(--main-100);
            font-weight: 700;
        }
    }
    & input.wpcf7-form-control::placeholder,
	& textarea.wpcf7-form-control::placeholder {
        color: var(--main-100);
    }
    & .wpcf7-submit {
        background-color: var(--main-100)!important;
		border: 1px solid var(--main-100)!important;
		color: var(--main-900)!important;
    }
    & .wpcf7-submit:hover {
		background-color: var(--btn-dark-hover)!important;
		border: 1px solid var(--btn-dark-hover)!important;
		color: var(--btn-light-hover)!important;
	}
}
#opinie {
    &.is--pt {
        @media (max-width: 1200px) { & {
            padding-top: 0;
        }}
    }
    & .section__columns--3 {
        @media (max-width: 1200px) { & {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }}
        @media (max-width: 768px) { & {
            grid-template-columns: repeat(1, minmax(0, 1fr));
        }}
    }
    & .section__column {
        background-color: var(--main-200);
        padding: 32px;
        &:before {
            content: url(../assets/img/quote.svg);
        }
    }
    & .section__inner {
        display: flex;
        flex-direction: column;
        gap: 8px;
        & .section__header {
            order: 2;
            color: #8D0006;
            & h3 {
                font-weight: 700;
            }  
        }
        & .section__desc {
            font-size: 1.2rem;
        }
    }
    & .section__button {
        text-align: right;
    }
}

#wspolpraca {
    overflow-x: hidden;
    position: relative;
    &::before {
        content: url(../assets/img/ajmer_sketch.svg);
        position: absolute;
        top: 40px;
        right: 10svw;
        width: 50svw;
        height: auto;
        z-index: -1;
        opacity: 0.2;
    }
    @media (max-width: 1200px) { &::before {
        right: 2svw;
        width: 70svw;
    }}
    @media (max-width: 768px) { &::before {
        top: 192px;
    }}
    @media (max-width: 768px) { &::before {
        right: 15svw;
    }}
    & .multi__column {
        gap: 48px;
        &.is--align-left,
        &.is--align-right {
        @media (max-width: 1200px) { & {
            justify-items: center;
        }}
    }
    }
    & .multi__columns--3 {
        @media (max-width: 1200px) { & {
            grid-template-columns: repeat(1, minmax(0, 1fr));
            padding: 24px 16px 96px 16px;
        }}
        @media (max-width: 768px) { & {
            padding-bottom: 64px;
        }}
    }
    & .multi__column:first-child {
        @media (min-width: 1201px) { & {
            padding-bottom: 256px;
        }}
        & .section__header {
            order: -1;
        }
    }
    & .multi__column:nth-child(2) {
        font-size: 1.2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }
    & .multi__column:nth-child(3) {
        @media (min-width: 1201px) { & {
            padding-top: 256px;
        }}
        @media (max-width: 1200px) { & .section__button {
            margin-top: -24px;
        }}
    }
    & ol {
        counter-reset: my-counter;
        list-style: none;
        padding-left: 0;
        display: flex;
        flex-direction: column;
        gap: 32px;
    }
    & ol li {
        counter-increment: my-counter;
        position: relative;
        padding-left: 56px;
        line-height: 40px;
    }
    ol li::before {
        content: counter(my-counter);
        position: absolute;
        left: 0;
        top: 0;
        
        width: 40px;
        height: 40px;
        
        background: #8D0006;
        color: white;
        
        border-radius: 50%;
        
        display: flex;
        align-items: center;
        justify-content: center;
        
        font-size: 14px;
        font-weight: bold;
    }
}

#case-study {
    @media (min-width: 1201px) { & {
        padding-top: 192px;
        padding-bottom: 192px;
    }}
    & .section__columns--2 {
        @media (max-width: 1200px) { & {
            grid-template-columns: repeat(1, minmax(0, 1fr));
            gap: 64px;
            justify-items: center;
        }}
        @media (max-width: 768px) { & {
            gap: 32px;
        }}
    }
    & .section__column {
        @media (max-width: 1200px) { & {
            display: contents;
        }}
    }
    & .section__button {
        @media (max-width: 1200px) { & {
            order: 3;
        }}
    }
    & .section__column:first-child {
        @media (min-width: 1201px) { & {
            position: sticky;
            top: 184px;
            align-self: start;
            height: fit-content;
            gap: 32px;
        }}
    }
	& .section__title {
		@media (max-width: 1200px) { & {
            max-width: 960px;
    		text-align: center;
        }}
	}
    & video {
        max-width: 100%;
        height: auto;
    }
}

#cta {
    overflow-x: hidden;
    & .multi__columns--3 {
        @media (max-width: 1200px) {
            grid-template-columns: repeat(1, minmax(0, 1fr));
            justify-items: center;
            gap: 32px;
        }
    }
    & .multi__column {
        @media (max-width: 1200px) { & {
            display: contents;
        }}
    }
    & .multi__column:first-child {
        & .is--d1 {
            font-size: 12rem;
            z-index: 2;
            position: relative;
            @media (max-width: 1200px) { & {
                font-size: 8rem;
            }}
            @media (max-width: 576px) { & {
                font-size: 6rem;
            }}
        }
    }
    & .multi__column:last-child {
        & .is--d1 {
            font-size: 6rem;
            z-index: 2;
            position: relative;
            @media (max-width: 1200px) { & {
                font-size: 4rem;
            }}
            @media (max-width: 576px) { & {
                font-size: 3rem;
            }}
        }
    }
    & .multi__column:nth-child(1),
    & .multi__column:nth-child(3) {
        z-index: 2;
    }
    & .multi__column:nth-child(2) {
        @media (min-width: 1201px) {
            margin-bottom: -96px;
            & .section__img {
                margin: 0 -64px;
                z-index: 1;
            }
        }
        @media (max-width: 1200px) { & {
            .section__img {
                margin: -64px 0 -56px 0;
                z-index: 1;
            }
            .section__button {
                order: 3;
            }
        }}
    } 
}

#dlaczego-my {
    & .section__columns--3 {
        @media(max-width: 1200px) { & {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }}
        @media(max-width: 768px) { & {
            grid-template-columns: repeat(1, minmax(0, 1fr));
        }}
    }
    & .section__inner {
        display: flex;
        flex-direction: row;
        gap: 16px;
    }
    & .section__img {
        background-color: var(--brand-first);
        padding: 24px;
        width: 96px;
        height: 96px;
        flex-shrink: 0;
        & > img {
            width: 48px;
            height: 48px;
        }
    }
    & .section__column .section__header {
        padding-bottom: 8px;
        & .section__title {
            font-weight: 700;
        }
    }
}