header{
    background:#00000070;
}
.hero{
    min-height: 100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
section{
    overflow: visible;
}
.max{
    width: 100%;
    background: var(--black);
}
.menu-side span{
    color:var(--black);
}
.burger{
    background: var(--white);
    & .btn{
        background: var(--black);
        & .burger-line {
            background: var(--white);
        }
    }
}
h1{
    font-size:clamp(25px, 40rem, 40px);
    font-weight: 500;
}
.gallery{
    display: flex;
    flex-direction: row;
    transform: translateY(-122rem);
    & .gallery-item{
        width: 25%;
        overflow-y: visible;
        height: 361px;
        & img{
            height: 361px;
            object-fit: cover;
            width: 100%;
            transition: height 2s;
        }
    }
}
.gallery{
    & .gallery-item{
        & img:hover{
            height:486px;
            transition: height 2s;
        }
    }
}
.descriptions{
    color: var(--white);
    & p{
        margin-top: 10px;
        margin-bottom: 10px;
        padding: 1px 0 1px 0;
    }
    & .content{
        display: flex;
        flex-direction: column;
        padding-top: 100rem;
        & .descriptions_top{
            padding-bottom: 50px;
        }
        & .descriptions_bottom{
            display: flex;
            flex-direction: row;
            margin-top: 25px;
            padding-left: 56px;
            padding-right: 56px;
            gap: 56px;
            & .descriptions_left{
                max-width: 50%;
                font-size: clamp(20px, 32rem, 32px);
                & p:first-child{
                    height: 0;
                    padding: 0;
                    margin: 0;
                }
                & p:nth-child(2){
                    margin-top: 0;
                }
            }
            & .czel{
                font-size: 24px;
                padding-bottom: 51px;
                margin-top: 0;
                padding-top: 0;
            }
        }
        & .akczenty{
            & p{
                color:var(--accent);
                padding-left: 20px;
                margin-top: 0;
                font-weight: 700;

            }
            & ul{
                padding: 0;
                li{
                    color:var(--accent);
                    font-size: clamp(20px, 32rem, 32px);
                    list-style-type: none;
                    padding-bottom: 10px;
                }
            }

        }
    }
}
.work{
    background:var(--black);
}
.pre-footer{
    padding-top: 88rem;
    background:var(--black);
    border-top: 1px solid #D4D4D4;
    overflow: hidden;
    & .pre-top{
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        margin-bottom: 60rem;
        & .loader-bottom{
            z-index: 1;
            position: absolute;
            bottom: -80rem;
            right: 550rem;
        }
        & p{
            color:var(--white);
        }
        & .loader-bottom{
            width:182rem;
        }
    }
    & .pre-bottom{
        width: 100%;
        position: relative;
        & img{
            width: 100%;
            object-fit: cover;
            max-width: calc((100% - 1450px) / 2 + 1450px);
            margin-right: 200rem;
        }
    }
}
@media(max-width:900px){
    .gallery{
        display: flex;
        flex-direction: row;
        transform: translateY(0);
        flex-wrap: wrap;
        & .gallery-item{
            width: 50%;
            max-height: 220px;
        }
    }
    .descriptions {
        padding-top: 50px;
        & .content {
            & .descriptions_bottom {
                display: flex;
                flex-direction: column;
                padding-left: 0;
                padding-right: 0;
                gap:10px;
                & .czel{
                    padding-bottom: 30px;
                }
                & .descriptions_left{
                    max-width: 100%;
                }
                & .akczenty {
                    padding-bottom: 60px;
                    & ul li {
                        font-size: 16px;
                    }
                    & p{
                        padding-left: 0;
                    }
                }
            }
        }
    }
}