.header {
    background: #fff;
    z-index: 50;
    position: sticky;
    top: 0;

    .header__items {
        padding: 20px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .header__logo {
            display: block;
            width: 180px;

            img {
                width: 100%;
            }
        }

        .header__links {
            display: flex;
            align-items: center;
            list-style: none;
            padding: 0;
            margin: 0;
            gap: 50px;

            li {
                a {
                    text-decoration: none;
                    text-transform: capitalize;
                    color: gray;
                    transition: 0.3s all;

                    &::after {
                        content: '';
                        display: block;
                        height: 2px;
                        width: 0%;
                        background: var(--main-gold);
                        transition: 0.3s all;
                    }

                    &:hover::after {
                        width: 100%;
                    }

                    &:hover {
                        color: #000;
                    }
                }
            }
        }

        .header__language {
            display: flex;
            align-items: center;
            gap: 10px;
            form {
                button {
                    img {
                        border-top: 1px solid gainsboro;
                        border-left: 1px solid gainsboro;
                        border-right: 1px solid gainsboro;
                    }
                }
            }
        }
        .lang_btn {
            border: none;
            /* box-shadow: 0 0 15px 5px gainsboro; */
        }
        .header__burger {
            display: none;
        }
    }
}

.main {
    padding-block: var(--padding-block-size);
    .main__items {
        padding: 10px;
        min-height: 100%;
        box-shadow: 0 0 15px 3px gainsboro;
        border-radius: 20px;
        gap: 30px;
        .main__img {
            max-height: 500px;
            width: 100%;
            object-fit: cover;
        }
        .main__photos {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 30px;
            margin-top: 30px;
            img {
                display: block;
                height: 300px;
                width: 100%;
                object-fit: cover;
            }
        }
        .main__info {
            min-height: 100%;
            width: 100%;
            padding: 20px;
            display: flex;
            flex-direction: column;
            position: relative;
            gap: 5px;
            font-size: 14px;
            span {
                display: block;
                font-weight: 600;
                font-size: 22px;
                color: var(--main-gold);
            }
            .main__info-btn {
                max-width: 300px;
                /* position: absolute; */
                /* bottom: 0; */
                /* right: 0; */
            }
        }
    }
}

@media screen and (max-width: 992px) {
    .header {
        .header__items {
            .header__links {
                position: fixed;
                top: 0;
                width: 50%;
                right: -200%;
                height: 100vh;
                background: #fff;
                flex-direction: column;
                justify-content: center;
                transition: 0.3s all;
            }
            .header__links-active {
                right: 0;
                transition: 0.3s all;
            }
            .header__burger {
                position: relative;
                z-index: 50;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                padding: 5px 2px;
                height: 25px;
                width: 25px;
                border: none;
                background: none;
                transition: 0.3s all;
                .line {
                    display: block;
                    height: 1.8px;
                    width: 100%;
                    background: #000;
                    &:nth-child(1) {
                        width: 70%;
                        transition: 0.3s all;
                    }
                    &:nth-child(3) {
                        width: 70%;
                        transition: 0.3s all;
                    }
                    transition: 0.3s all;
                }
            }
            .header__burger-active {
                transition: 0.3s all;
                .line {
                    &:nth-child(1) {
                        width: 100%;
                        transform: translate(0px, 6px) rotate(45deg);
                        transition: 0.3s all;
                    }
                    &:nth-child(2) {
                        width: 0;
                        transition: 0.3s all;
                    }
                    &:nth-child(3) {
                        width: 100%;
                        transform: translate(0px, -7px) rotate(-45deg);
                        transition: 0.3s all;
                    }
                }
            }
        }
    }
}