.product_line {
    .intro {
        position: relative;
        background-size: cover;
        background-position: center;
        border-radius: var(--size-30px);
        padding: 4rem;
        --bs-gutter-x: 0;

        div {
            z-index: 2;
        }

        .title {
            font-family: 'prata-regular', serif;
            font-size: var(--size-38px);
            line-height: var(--size-38px);

            .number {
                font-size: var(--size-100px);
                line-height: var(--size-100px);
            }

            @media (min-width: 768px) {
                font-size: var(--size-60px);
                line-height: var(--size-60px);

                .number {
                    font-size: var(--size-200px);
                    line-height: var(--size-200px);
                }
            }
        }

        &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            border-radius: var(--size-30px);
        }
    }

    .product-container {
        height: 80vh;
        position: relative;

        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: var(--black-header);
            border-radius: var(--size-30px);
            pointer-events: none;
        }

        .product-list {
            position: relative;
            background-size: cover;
            background-position: center;
            height: 100%;
            border-radius: var(--size-30px);

            .product-details {
                color: var(--white);
                z-index: 2;
                max-width: 100%;

                .product-specifications {
                    font-family: 'prata-regular', serif;
                    border-radius: var(--size-20px);
                    background-color: var(--white);
                    color: var(--black);
                    font-size: var(--size-12px);
                    line-height: var(--size-12px);
                    max-width: fit-content;

                    .list-inline {
                        span {
                            font-size: var(--size-18px);
                            line-height: var(--size-18px);
                        }

                        @media (min-width: 768px) {
                            font-size: var(--size-15px);
                            line-height: var(--size-12px);

                            span {
                                font-size: var(--size-24px);
                                line-height: var(--size-35px);
                            }
                        }
                    }

                    @media (max-width: 576px) {
                        .btn-dual {
                            margin: 0.5rem auto !important;

                            & div {
                                border-radius: 0.5rem;
                                padding: 0.4rem !important;

                                &.icon {
                                    width: 2rem;
                                    height: 2rem;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

.product_show {
    .setMinHeight {
        height: min-content;

        @media (min-width: 768px) {
            height: auto;
        }
    }

    #intro {
        ul {
            width: 100%;

            @media (min-width: 768px) {
                width: 75%;
                margin-left: auto;
                margin-right: auto;
            }

            li {
                @media (max-width: 768px) {
                    width: 50%;
                    margin: 1rem 0;

                    span {
                        font-size: var(--size-30px);
                        line-height: var(--size-30px);
                    }
                }
            }
        }
    }

    #product {
        ul li {
            list-style: url("../../icons/icon/losange-2f566137be66b3140a20d6c48992edf9.svg");
        }

        .img-container {
            border-radius: var(--size-30px);
            height: 100%;
            padding: 2rem;
            background-color: var(--light-brown);
            position: relative;

            img {
                border-radius: var(--size-30px);
            }

            svg {
                position: absolute;
                top: 1rem;
                right: 1rem;
            }
        }
    }

    #photoVideo {
        .img-row {
            .video-container {
                position: relative;
                width: 100%;
                max-width: 100%;
                min-height: 100%;

                @media (max-width: 768px) {
                    width: 100%;
                    aspect-ratio: 16/9;
                }

                iframe {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    border-radius: var(--size-30px);
                }
            }

            img {
                border-radius: var(--size-30px);
                height: 100%;
                width: 100%;
                object-fit: cover;
                max-height: 80vh;
            }

            @media (min-width: 768px) {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                grid-template-rows: repeat(2, minmax(0, 1fr));
                gap: 10px;
                height: 80vh;

                &.odd {
                    .img-0 {
                        grid-column: 1;
                        grid-row: 1/2;
                    }

                    .img-1 {
                        grid-column: 1;
                        grid-row: 2/3;
                    }

                    .img-2 {
                        grid-column: 2/4;
                        grid-row: 1/3;
                    }
                }

                &.even {
                    .img-0 {
                        grid-column: 1/3;
                        grid-row: 1/3;
                    }

                    .img-1 {
                        grid-column: 3;
                        grid-row: 1/2;
                    }

                    .img-2 {
                        grid-column: 3;
                        grid-row: 2/3;
                    }
                }

                &.img-count-1 {
                    &.odd {
                        .img-0 {
                            grid-column: 2/4;
                            grid-row: 1/3;
                        }
                    }

                    &.even {
                        .img-0 {
                            grid-column: 1/3;
                            grid-row: 1/3;
                        }
                    }
                }

                &.img-count-2 {
                    grid-template-rows: repeat(2, auto);

                    &.odd {
                        .img-0 {
                            grid-column: 1/2;
                            grid-row: 1/2;
                        }

                        .img-1 {
                            grid-column: 2/4;
                            grid-row: 1;
                        }
                    }

                    &.even {
                        .img-0 {
                            grid-column: 1/3;
                            grid-row: 1;
                        }

                        .img-1 {
                            grid-column: 3/4;
                            grid-row: 1/2;
                        }
                    }
                }

                .video-container {
                    height: auto;
                }
            }
        }
    }

    #simulators {
        background-color: var(--light-brown);

        .btn-primary {
            background-color: var(--white);
            border: var(--white);
            color: var(--terracotta);

            &.active {
                background-color: var(--terracotta);
                border: var(--terracotta);
                color: var(--white);
            }

            &:hover {
                background-color: var(--terracotta);
                border: var(--terracotta);
                color: var(--white);
            }
        }

        .render-view-container {
            position: relative;

            .render-view {
                img {
                    width: 100%;
                    display: none;
                    padding: 0 2rem;
                    border-radius: 3rem/1rem;

                    @media (min-width: 768px) {
                        border-radius: 5rem/3rem;
                    }

                    &.background {
                        z-index: 1;
                        position: relative;
                    }

                    &.skeleton {
                        z-index: 2;
                        position: absolute;
                        top: 0;
                        left: 0;
                    }

                    &.facade {
                        z-index: 4;
                        position: absolute;
                        top: 0;
                        left: 0;
                    }

                    &.option {
                        z-index: 3;
                        position: absolute;
                        top: 0;
                        left: 0;
                    }

                    &.active {
                        display: block;
                    }
                }
            }
        }

        .simulator-options {
            .accordion {
                .accordion-item {
                    background-color: transparent;
                    border: none;
                    margin-top: 1rem;
                    display: none;

                    &.active {
                        display: block;
                    }

                    .accordion-header {
                        .accordion-button {
                            color: var(--terracotta);
                            border-radius: var(--size-20px);

                            &:not(.collapsed) {
                                background-color: var(--white);
                            }
                        }
                    }

                    .accordion-body {
                        button {
                            padding: 0 0.5rem;
                            background-color: transparent;
                            border: none;
                            flex-basis: 33%;

                            @media (min-width: 576px) {
                                flex-basis: 25%;
                            }

                            .vignette {
                                width: 4rem !important;
                                height: 4rem !important;
                                margin: auto;
                                border-radius: var(--size-10px);
                            }

                            svg {
                                width: var(--size-28px);

                                path {
                                    fill: var(--black);
                                }

                            }

                            &.active {
                                svg {
                                    path {
                                        fill: var(--terracotta);
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    .others {
        .row {
            @media (min-width: 768px) {
                height: 80vh;
            }

            .col {
                @media (max-width: 768px) {
                    height: 80vh;
                }

                .product-specifications {
                    font-size: var(--size-15px);

                    ul {
                        li {
                            margin: 0 0.5rem;

                            span {
                                font-size: var(--size-24px);
                            }
                        }
                    }
                }
            }
        }
    }
}

.product-specifications {
    ul {
        li {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 0 1rem;

            @media (min-width: 576px) {
                margin: 0 1.5rem;
            }

            span {
                font-size: var(--size-50px);
                line-height: var(--size-50px);
            }
        }
    }
}

.product_designExterieur, .product_designInterieur, .product_hatha {
    .img-container {
        max-height: 80vh;

        img {
            max-width: 100%;
            max-height: 100%;
        }
    }

    .intro {
        p {
            font-size: var(--size-32px);
            line-height: var(--size-54px);
        }
    }

    .atmosphere {
        .container {
            border-radius: var(--size-30px);
            background-size: cover;
            background-position: center;
            margin: 0;
            width: 100%;
            max-width: initial;
            min-height: 80vh;

            @media (max-width: 768px) {
                background: none !important;
            }

            .content {
                height: min-content;
                background-color: var(--light-brown);
                border-radius: var(--size-30px);
                width: 100%;

                @media (min-width: 768px) {
                    max-width: 33%;
                    width: fit-content;
                }

                .category {
                    font-size: var(--size-24px);
                }

                .ambiance {
                    width: var(--size-100px);
                    font-size: var(--size-15px);

                    img {
                        width: var(--size-60px);
                        height: var(--size-60px);
                        border-radius: var(--size-10px);
                    }

                    p {
                        line-height: var(--size-15px);
                    }
                }
            }
        }
    }

    .equipments {
        .equipment {
            @media (min-width: 576px) {
                width: 50%;
            }

            @media (min-width: 768px) {
                width: 25%;
            }
        }
    }

    .performance {
        color: var(--white);
        background-size: cover;
        background-position: center;

        .title {
            font-family: 'Prata-regular', serif;
            line-height: var(--size-80px);
            font-size: var(--size-80px);

            @media (min-width: 768px) {
                line-height: var(--size-150px);
                font-size: var(--size-128px);
            }
        }

        .subtitle {
            font-family: 'Prata-regular', serif;
            font-size: var(--size-24px);
            line-height: var(--size-30px);
        }
    }
}