.page-heading {
    background-color: var(--main-900);
    & .is--standard {
        padding: 16px 32px 64px 32px;
    }
	& .section__title {
		padding-top: 32px;
	}
}

.full-width.is--align-left > .container,
.agile-columns.is--align-left > .container,
.boxes.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 {
    text-align: center;
	justify-items: center;
}

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

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

.agile-columns {
    & .section__column .section__inner {
        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;
        }
    }
}

.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;
        }
    }
    & .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;
    }
}

.realizations {
	padding-left: 32px;
	padding-right: 32px;
	& .section__column {
		margin-bottom: 0;
	}
	@media (min-width: 1201px) { & {
		& .section__columns--4 {
			grid-template-columns: repeat(4, 1fr);
			grid-template-rows: repeat(2, 1fr);
			height: 480px;
		}
		& .section__column:nth-child(1) {
			grid-column: 1;
			grid-row: 1;
			height: 224px;
		}
		& .section__column:nth-child(2) {
			grid-column: 1;
			grid-row: 2;
			height: 224px;
		}
		& .section__column:nth-child(3) {
			grid-column: 2;
			grid-row: 1 / span 2;
			height: 480px;
		}
		& .section__column:nth-child(4) {
			grid-column: 3;
			grid-row: 1 / span 2;
			height: 480px;
		}
		& .section__column:nth-child(5) {
			grid-column: 4;
			grid-row: 1;
			height: 224px;
		}
		& .section__column:nth-child(6) {
			grid-column: 4;
			grid-row: 2;
			height: 224px;
		}
	}}
	& .section__inner,
	& .section__img,
	& .section__img > img {
		width: 100%;
    	height: 100%;
	}
	& .section__img {
		border-radius: 0 60px 0 60px;
		& img {
			border-radius: 0 60px 0 60px;
			object-fit: cover;
			@media (max-width: 1200px) { & {
				border-radius: 0 32px 0 32px;
			}}
		}
	}
}