@scope (.quicklook-container) {
    background: none;
    position: relative;
    border-radius: var(--radius-3xl);
    height: 400px;
    overflow: hidden;
    margin-bottom: var(--space-8);

    & .btn-controller {
        position: absolute;
        bottom: 10%;
        right: 3%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        background: var(--white);
        border-radius: var(--radius-lg);
        width: fit-content;
        padding: var(--space-2);
        z-index: 10;

        & .btn-bento {
            color: var(--black);
            background: var(--white);
            padding: var(--space-3);
            font-weight: var(--font-weight-semibold);
            border-radius: var(--radius-lg);

            &.active-btn {
                background: var(--black);
                color: var(--white);

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

                & .btn-content {
                    & .color-line {
                        background: var(--white);
                    }

                    & .btn-subtitle {
                        color: var(--white-60);
                    }
                }
            }

            &:hover {
                background: var(--black-10);
            }

            & .btn-content {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: calc(var(--space-1)/2);

                & .color-line {
                    height: 5px;
                    width: 100%;
                    background: var(--black);
                    border-radius: var(--radius-pill);
                }

                & .btn-title {
                    margin: 0;
                }

                & .btn-subtitle {
                    margin: 0;
                    color: var(--black-60);

                    
                }
            }
        }
    }

    & .product-panel {
        display: none;
        position: relative;

        & .text-container {
            position: absolute;
            top: 5%;
            left: 5%;
            z-index: 2;

            display: flex;
            flex-direction: column;
            gap: var(--space-1);
            align-items: start;
            justify-content: start;
            
            & .title {
                font-size: var(--font-size-4xl);
                line-height: var(--line-head-4xl);
                margin: 0;
                color: var(--white);
                text-shadow:
                    0 1px 2px rgb(0 0 0 / 0.35),
                    0 3px 8px rgb(0 0 0 / 0.15);
            }

            & .description {
                font-size: var(--font-size-lg);
                line-height: var(--line-body-lg);
                font-weight: var(--font-weight-semibold);
                margin: 0;
                color: var(--white);
                text-shadow:
                    0 1px 2px rgb(0 0 0 / 0.35),
                    0 3px 8px rgb(0 0 0 / 0.15);
            }

        }

        & .img-filter {
            position: relative;
            width: 100%;
            overflow: hidden;
            border-radius: var(--radius-3xl);
            z-index: 1;

            &::after {
                content: "";
                position: absolute;
                inset: 0;
                background-color: oklch(6.674% 0.03432 306.914 / 0.336);
                pointer-events: none;
                z-index: 1;
            }

            & .panel-img {
                display: block;
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: var(--radius-3xl);
            }
        }
        
        
        &.active-panel {
            display: block;
        }
    }

}