


@media(max-width: 767px) {
    .motto {
        margin-bottom: 1.875rem;
    }

    .title {
        margin-bottom: 3.75rem;
    }

    .text {
        margin-bottom: 6.25rem;
    }

    .section-hero {
        order: 1;
        position: relative;
        width: 100%;
        height: 60rem;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }


    .section-hero__slider {
        position: relative;
        overflow: hidden;
        width: 100%;
        height: 100%
    }

    .section-hero__slider__slide {
        position: absolute;
        inset: 0;
        transform: translateX(100%);
    }

    .section-hero__slider__slide img {
        object-fit: cover;
        z-index: -1;
    }

    .section-hero__slider__button {
        position: absolute;
        width: 5rem;
        cursor: pointer;
        top: 0;
        bottom: 0;
        border: none;
        background: none;
        color: transparent;
    }
    .section-hero__slider__button.right {
        right: 0;
    }
    .section-hero__slider__button.left {
        left: 0;
    }

    .section-hero__slider__arrow {
        position: absolute;
        top: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2rem;
        --stroke-width: 0.5px;
        --color-stroke: var(--argo-biel);
    }

    .section-hero__slider__arrow svg {
        height: 3.125rem;
        width: 2rem;
    }
    .section-hero__slider__arrow.right {
        right: 1.25rem
    }
    .section-hero__slider__arrow.left {
        transform: rotateZ(180deg);
        left: 1.25rem;
    }

    .section-hero__gallery_points {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 3.125rem;
        display: flex;
        flex-direction: row;
        gap: 1rem;
        justify-content: center;
    }

    .section-hero__gallery_points__svg {
        width: 1.5rem;
        height: 1.5rem;
    }

    .section-hero__gallery_points__svg.static {
        --stroke-width: 2px;
        --color-stroke: var(--argo-biel);
        --color-fill: transparent;
    }
    .section-hero__gallery_points__svg.dynamic {
        --color-stroke: transparent;
        --color-fill: var(--argo-biel);
    }

    .section-hero__svg {
        width: calc(5rem + 1px);
        height: calc(5rem + 1px);
        position: absolute;
        right: -1px;
        bottom: -1px;
        z-index: 2;
        --color-fill: var(--argo-biel);
    }

    /* SECTION LEAD */
    .section-lead {
        order: 2;
        background: var(--argo-biel);
        display: flex;
        flex-direction: column;
        padding: 5rem 2rem 6.25rem 2rem
    }

    .section-lead__inner-divider {
        display: flex;
        flex-direction: column;
        column-gap: 1.875rem;
        row-gap: 0;
    }

    .section-lead__motto {
    }

    .section-lead__title {
        font-size: 4rem;
        line-height: 4.75rem;
    }

    .section-lead__text {
    }

    .section-lead__button {
    }

    /* SECTION CARPENTRY */
    .section-carpentry {
        background: var(--argo-stal);
        display: contents;

    }

    .section-carpentry__inner-divider {
        background: var(--argo-stal);
        padding: 3rem 2rem 6.25rem 2rem;
        display: flex;
        flex-direction: column;
    }

    .section-carpentry__inner-divider.right {
        order: 5;
    }

    .section-carpentry__inner-divider.left {
        order: 3;
    }

    .section-carpentry__img-container {
        min-height: 45rem;
        max-height: 45rem;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .section-carpentry__img {
    }

    .section-carpentry__subtitle {
        margin-top: 5rem;
        margin-bottom: 3.75rem;
    }

    .section-carpentry__text {
        margin-bottom: 6.25rem;
    }

    .section-carpentry__button {
        margin-top: auto;
    }

    .section-steel {
        order: 4;
        padding: 6.25rem 2rem 6.25rem 2rem;
        gap: 5rem;

        background: var(--argo-biel);
        display: flex;
        flex-direction: column;
    }

    .section-steel__inner-divider {
        width: 100%;
        display: flex;
        flex-direction: column;
        position: relative;

    }

    .section-steel__img-container {
        height: 52.5rem;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .section-steel__img {
        height: 100%;
    }

    .section-steel__img__svg {
        position: absolute;
        height: calc(5rem + 1px);
        width: calc(5rem + 1px);
        right: -1px;
        bottom: -1px;
        --color-fill: var(--argo-biel);
    }

    .section-steel__inner-divider__container {

    }

    .section-steel__svg {
        display: none;
    }

    .section-steel__title {
        margin-top: -0.1875rem;
        margin-bottom: 2.25rem;
    }

    .section-steel__text {
        margin-bottom: 0;
    }

    .section-steel__button {
        display: none;
    }

    .section-aluminium {
        padding: 6.25rem 2rem 6.25rem 2rem;

        order: 6;
        background: var(--argo-biel);

        gap: 5rem;
        display: flex;
        flex-direction: column;

    }
    .section-aluminium__inner-divider {
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    .section-aluminium__inner-divider.left {
    }
    .section-aluminium__inner-divider.right {
        height: 52.5rem;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        position: relative;
    }
    .section-aluminium__motto {
        margin-top: auto;
    }

    .section-aluminium__title {
        margin-bottom: 3.75rem;
    }

    .section-aluminium__text {
        margin-bottom: 0;
    }

    .section-aluminium__button {
        display: none;
    }


    .section-aluminium__img {
        height: 100%;
    }
    .section-aluminium__img__svg {
        position: absolute;
        height: calc(5rem + 1px);
        width: calc(5rem + 1px);
        right: -1px;
        bottom: -1px;
        --color-fill: var(--argo-biel);
    }


    .section-configurator {
        order: 7;
        background: var(--argo-błękit);

        padding: 5rem 2rem 7.5rem 2rem;
        display: flex;
        flex-direction: column;
        gap: 6.25rem;
    }

    .section-configurator__inner-divider.left {
        position: relative;
        height: 28.8vw;
    }

    .section-configurator__svg {
        max-height: 28.8vw;
        max-width: 28.8vw;
        position: absolute;
        aspect-ratio: 1;
        left: 0;
        top: 0;
        bottom: 0;
        --color-fill: transparent;
        --color-stroke: var(--argo-granat);
        --stroke-width: 4px;
    }

    .section-configurator__inner-divider.right {
        margin-top: 2.4vw;
        display: flex;
        flex-direction: column;
    }

    .section-configurator__motto {
        display: none;
    }

    .section-configurator__title {
        text-align: center;
        margin-bottom: 5rem;
    }

    .section-configurator__button {
        margin-top: auto;
    }

    .section-image-divider {
        order: 8;
        height: 31.25rem;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .section-image-divider__img {
        width: 100%;
    }


.section-image-divider {
        order: 7;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .section-image-divider__video-block {
        position: relative;
        padding: 2rem;
        width: auto;
        height: auto;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
    }

    .section-image-divider__video-block__play {
        position: absolute;
        inset: 0;
        z-index: 10;
        margin: auto;
        width: 5rem;
        height: 5rem;
        border: 0;
        background: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .section-image-divider__video-block__player {
        width: 100%;
        height: 100%;
        grid-row: 1;
        grid-column: 1;
        cursor: pointer;
    }

    .section-image-divider__video-block__poster {
        width: 100%;
        height: 100%;
        grid-row: 1;
        grid-column: 1;
        cursor: pointer;
    }

    .section-image-divider__video-block__poster.hidden {
        display: none;
    }

    .section-image-divider__video-block.is-playing .section-image-divider__video-block__play {
        display: none;
    }
}

@media(min-width: 768px) {
    .motto {
        margin-bottom: 2.125rem;
    }

    /* SECTION HERO */
    .section-hero {
        position: relative;
        width: 100%;
        height: 55rem;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }


    .section-hero__slider {
        position: relative;
        overflow: hidden;
        width: 100%;
        height: 100%
    }

    .section-hero__slider__button {
        position: absolute;
        width: 4rem;
        cursor: pointer;
        top: 0;
        bottom: 0;
        border: none;
        background: none;
        color: transparent;
    }
    .section-hero__slider__button.right {
        right: 0;
    }
    .section-hero__slider__button.left {
        left: 0;
    }

    .section-hero__slider__arrow {
        position: absolute;
        top: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 0.875rem;
        --stroke-width: 1px;
        --color-stroke: var(--argo-biel);
    }
    .section-hero__slider__arrow svg {
        height: 1.5625rem;
        width: 0.875rem;
    }
    .section-hero__slider__arrow.right {
        right: 1.25rem
    }
    .section-hero__slider__arrow.left {
        transform: rotateZ(180deg);
        left: 1.25rem;
    }


    .section-hero__slider__slide {
        position: absolute;
        inset: 0;
        transform: translateX(100%);
    }

    .section-hero__slider__slide img {
        object-fit: cover;
        z-index: -1;
    }


    .section-hero__gallery_points {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 2.5rem;
        display: flex;
        flex-direction: row;
        gap: 0.75rem;
        justify-content: center;
    }

    .section-hero__gallery_points__svg {
        width: 0.9375rem;
        height: 0.9375rem;
    }

    .section-hero__gallery_points__svg.static {
        --stroke-width: 2px;
        --color-stroke: var(--argo-biel);
        --color-fill: transparent;
    }
    .section-hero__gallery_points__svg.dynamic {
        --color-stroke: transparent;
        --color-fill: var(--argo-biel);
    }

    .section-hero__svg {
        width: calc(6.25rem + 1px);
        height: calc(6.25rem + 1px);
        position: absolute;
        right: -1px;
        bottom: -1px;
        z-index: 2;
        --color-fill: var(--argo-biel);
    }

    /* SECTION LEAD */
    .section-lead {
        background: var(--argo-biel);
        display: flex;
        flex-direction: column;
        padding: 6.25vw 5.2vw 5.2vw 5.2vw
        /*padding: 7.5rem 6.25rem 3.75rem 6.25rem;*/
    }

    .section-lead__inner-divider {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 3.125rem minmax(8.75rem, auto) 3.125rem;
        grid-template-areas:
            "motto ."
            "title text"
            ".     button";

        column-gap: 1.875rem;
        row-gap: 0;
    }

    .section-lead__motto {
        grid-area: motto;
    }

    .section-lead__title {
        grid-area: title;
    }

    .section-lead__text {
        grid-area: text;
    }

    .section-lead__button {
        margin-top: 3.75rem;
        grid-area: button;
    }

    /* SECTION CARPENTRY */
    .section-carpentry {
        background: var(--argo-stal);
        display: flex;
        padding: 2.5rem 1.875rem 3.75rem 1.875rem;
        gap: 1.875rem;
        justify-content: space-between;
        align-items: stretch;

    }

    .section-carpentry__inner-divider {
        width: calc((100vw - 5.625rem)/2);
        display: flex;
        flex-direction: column;
    }

    .section-carpentry__img-container {
        min-height: 58.4375rem;
        max-height: 58.4375rem;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .section-carpentry__img {
    }

    .section-carpentry__subtitle {
        margin-top: 2.5rem;
        margin-bottom: 1.3125rem;
    }

    .section-carpentry__text {
        margin-bottom: 4.75rem;
    }

    .section-carpentry__button {
        margin-top: auto;
    }

    .section-steel {
        padding: 7.5rem 1.875rem 6.25rem 1.875rem;
        gap: 1.875rem;

        background: var(--argo-biel);
        display: flex;
    }

    .section-steel__inner-divider {
        width: calc((100vw - 5.625rem)/2);
        display: flex;
        flex-direction: column;
    }

    .section-steel__img-container {
        margin-top: 1.875rem;
        min-height: 67.5rem;
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .section-steel__img {
        height: 100%;
    }

    .section-steel__img__svg {
        display: none;
    }

    .section-steel__inner-divider__container {
        padding: 0 8.33vw 0 6.25vw;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .section-steel__svg {
        min-height: 24.5rem;
        max-height: 24.5rem;
        min-width: 24.5rem;
        max-width: 24.5rem;
        margin-bottom: 8.75rem;
        transform: translateX(-16px);
        --color-fill: transparent;
        --color-stroke: var(--argo-granat);
        --stroke-width: 2px;
    }

    .section-steel__title {
        margin-top: -0.1875rem;
        margin-bottom: 2.25rem;
    }

    .section-steel__text {
        margin-bottom: 3.5rem;
    }

    .section-steel__button {
    }

    .section-aluminium {
        background: var(--argo-błękit);
        display: flex;
        flex-direction: row-reverse;
        height: 55rem;
    }

    .section-aluminium__inner-divider.left {
        padding: 0 26.5625vw 6.25rem 6.25vw;
        display: flex;
        flex-direction: column;
    }

    .section-aluminium__motto {
        margin-top: auto;
    }

    .section-aluminium__title {
        margin-top: -0.1875rem;
        margin-bottom: 2.25rem;
    }

    .section-aluminium__text {
        margin-bottom: 3.5rem;
    }

    .section-aluminium__button {
    }

    .section-aluminium__inner-divider.right {
        min-width: 32.8125vw;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }
    .section-aluminium__img {
        height: 100%;
    }
    .section-aluminium__img__svg {
        display: none;
    }

    .section-configurator {
        background: var(--argo-biel);

        padding: 8.75rem 5vw 9.375rem 5.67vw;
        display: flex;
        flex-direction: row;
        gap: 7.5rem;
        align-items: stretch;
    }

    .section-configurator__inner-divider.left {
        position: relative;
        min-width: 18.375rem;
        width: auto;
        aspect-ratio: 1;
    }

    .section-configurator__svg {
        min-width: 18.375rem;
        aspect-ratio: 1;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        --color-fill: transparent;
        --color-stroke: var(--argo-granat);
        --stroke-width: 2px;
    }

    .section-configurator__inner-divider.right {
        margin-top: 1.125rem;
        display: flex;
        flex-direction: column;
    }

    .section-configurator__title {

    }

    .section-configurator__button {
        margin-top: auto;
    }

    .section-image-divider {
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .section-image-divider__video-block {
        position: relative;
        padding: 7.5rem;
        width: auto;
        height: auto;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
    }

    .section-image-divider__video-block__play {
        position: absolute;
        inset: 0;
        z-index: 10;
        margin: auto;
        width: 80px;
        height: 80px;
        border: 0;
        background: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .section-image-divider__video-block__player {
        width: 100%;
        height: 100%;
        grid-row: 1;
        grid-column: 1;
        cursor: pointer;
    }

    .section-image-divider__video-block__poster {
        width: 100%;
        height: 100%;
        grid-row: 1;
        grid-column: 1;
        cursor: pointer;
    }

    .section-image-divider__video-block__poster.hidden {
        display: none;
    }

    .section-image-divider__video-block.is-playing .section-image-divider__video-block__play {
        display: none;
    }
}
