.choice-detail {
    background-color: var(--page-bg);
    padding: 40px var(--px);

    @media (min-width: 992px) {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 40px;

        &:not(.padding-start-xl) {
            padding-block-start: 0px;
        }

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

    .choice-video {
        padding: 10px;
        display: flex;
        justify-content: center;
        align-items: flex-start;

        @media (min-width: 992px) {
            grid-column: span 2;
            padding: 0;
            justify-content: flex-start;
        }

        .video {
            width: 100%;
            max-width: 460px;
            aspect-ratio: 4 / 5;
            overflow: hidden;
            position: relative;

            & video {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            .controls {
                position: absolute;
                inset: 0;
                display: grid;
                place-items: center;

                .play-pause {
                    width: 64px;
                    height: 64px;
                    background-image: url(/assets/img/newpage/play-circle.png);
                    background-size: contain;
                    background-repeat: no-repeat;
                    background-position: center;
                    cursor: pointer;

                    &:hover {
                        opacity: 1;
                    }
                }

                &.playing {
                    opacity: 0;

                    &:hover {
                        opacity: 1;
                    }
                }
            }
        }
    }

    .choice-info {
        padding-block: 20px;

        @media (min-width: 992px) {
            grid-column: span 2;
            padding-inline-start: 40px;
        }

        & h3 {
            border-bottom: none;
            font-size: 2.25rem;
            font-weight: 400;
            line-height: 2;
            padding: 20px 10px;
            margin: 0;
            white-space: nowrap;

            & strong {
                font-weight: 700;
            }
        }

        .intro--image {
            display: flex;
            justify-content: flex-end;
            padding-block-start: 20px;

            & img {
                width: 70%;
                max-width: 260px;
            }
        }

        .media--image img {
            width: 100%;
            aspect-ratio: 3 / 2;
        }
    }

    .choice-description {
        padding: 40px 10px;
        display: flex;
        flex-direction: column;
        gap: 40px;

        @media (min-width: 768px) {
            flex-direction: row;

            &.choice-description--reverse {
                flex-direction: row-reverse;
            }
        }

        @media (min-width: 992px) {
            grid-column: span 2;
            padding: 20px 0;

            &.choice-description--reverse {
                grid-column: 3 / 5;
                grid-row: 2 / 3;
            }

            &.choice-description--small {
                grid-column: 4 / 5;
                grid-row: 2 / 3;
            }
        }

        .vertical--image {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;

            & img {
                max-width: 140px;
            }
        }

        .detail {
            flex: 1.5;

            & h5 {
                font-size: 1.5rem;
                font-weight: 400;
                line-height: 1.8;

                & strong {
                    font-weight: 700;
                }
            }
            & p {
                padding-block: 1.5em;
                font-size: 1.25rem;
                color: var(--gray);
                line-height: 1.8;
            }
        }
    }

    .choice-gallery {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        padding: 10px;

        @media (min-width: 768px) {
            gap: 20px;
        }

        @media (min-width: 992px) {
            grid-column: span 2;
            padding: 20px 0;

            &.choice-gallery--reverse {
                grid-column: 1 / 3;
                grid-row: 2 / 3;
            }

            &.choice-gallery--three {
                grid-column: 1 / 4;
                grid-row: 2 / 3;
            }
        }

        .gallery--image {
            & img {
                aspect-ratio: 1/ 1;
                object-fit: cover;
            }

            & figcaption {
                margin-block-start: 1em;
                font-size: 1.2rem;
                color: var(--gray);
            }
        }
    }

    .choice-gallery--three {
        @media (min-width: 768px) {
            grid-template-columns: repeat(3, 1fr);
        }
    }
}

.recommand {
    background-color: var(--page-bg);
    padding: 20px var(--px);

    .no {
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        translate: -50% 0;
        border: 1px solid currentColor;
        border-radius: 100%;
        width: 65px;
        height: 65px;

        display: grid;
        place-items: center;

        font-size: 3.2rem;
        font-weight: 700;

        &::before,
        &::after {
            content: '';
            display: block;
            position: absolute;
            width: 5px;
            height: 12px;
            background-color: var(--page-bg);
        }

        &::before {
            top: 50%;
            left: 0;
            translate: -50% -50%;
        }

        &::after {
            top: 50%;
            right: 0;
            translate: 50% -50%;
        }
    }

    .recommand--header {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;

        .center-container {
            position: relative;
            z-index: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            background-color: var(--page-bg);

            .arc {
                width: 120px;
                height: 30px;
                background-image: url(/assets/img/newpage/choice.png);
                background-size: 60%;
                background-repeat: no-repeat;
                background-position: center;
            }

            & h3 {
                border-bottom: none;
                padding: 0;
                margin: 0;
                margin-block-start: -5px;
                white-space: nowrap;
                font-size: clamp(2rem, 10vw, 4rem);
                font-weight: 700;
                text-transform: uppercase;
            }

            & small {
                font-size: 1.25rem;
            }
        }

        &::after {
            content: '';
            display: block;
            position: absolute;
            border-top: 1px solid var(--border-color);
            top: 50%;
            left: 0;
            right: 0;
        }
    }

    .recommand--pattern-one {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 20px;
        padding: 40px 20px 0;

        @media (min-width: 992px) {
            display: grid;
            grid-template-columns: .5fr 1fr;
            align-items: flex-start;
            gap: clamp(60px, 8vw, 100px);;
            padding-inline: 0;
        }

        .address-card {
            max-width: 400px;
            border: 1px solid var(--border-color);
            padding: 20px;

            .photo {
                background-color: var(--light-gray);
                padding: 10px;

                & img {
                    width: 100%;
                    aspect-ratio: 1 / 1;
                    object-fit: contain;
                }
            }

            & h5 {
                padding-block: 20px;
                font-size: 1.5rem;
                font-weight: 400;
            }

            & hr {
                margin: 0;
                border-top: 1px solid var(--border-color);
            }

            & p {
                margin: 0;
                padding-block: 20px;
                font-size: 1.25rem;
                line-height: 1.8;
                color: var(--gray);
            }
        }

        .product-cards {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 20px;
            padding: 20px 0;

            @media (min-width: 768px) {
                flex-direction: row;
                align-items: flex-start;
                gap: clamp(40px, 8vw, 60px);
            }

            @media (min-width: 992px) {
                justify-content: flex-end;
                padding: 0;
            }
        }
    }

    .recommand--pattern-two {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 40px;
        padding-block: 40px 20px;

        @media (min-width: 768px) {
            flex-wrap: wrap;
            flex-direction: row;
            align-items: flex-start;
        }

        .large-image {
            img {
                width: 100%;
                aspect-ratio: 3 / 2;
            }

            @media (min-width: 768px) {
                flex: 1;
            }
        }

        .product-cards {
            @media (min-width: 768px) {
                flex: 0;
                min-width: 220px;
            }

            @media (min-width: 992px) {
                min-width: 240px;
            }

            .product-card {
                padding-block-start: 0;
            }
        }

        .more-infos {
            min-width: 100%;

            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;

            .product-card {
                max-width: 200px;
            }

            @media (min-width: 568px) {
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: space-evenly;
                gap: clamp(10px, 6vw, 60px);
            }
        }
    }

    .product-card {
        max-width: 240px;
        padding-block-start: 55px;
        position: relative;

        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        gap: 20px;

        .product-image {
            & img {
                width: 100%;
                aspect-ratio: 1 / 1;
                object-fit: cover;
            }
        }

        & h5 {
            font-size: 1.5rem;
            font-weight: 400;
        }

        & p {
            color: var(--gray);
            font-size: 1.25rem;
        }
    }
}

.links-card {
    background-color: var(--page-bg);
    padding: 0px var(--px);

    @media (min-width: 768px) {
        padding-block: 40px;
    }

    .links-card--container {
        padding: 40px 20px;
        border: 1px solid var(--border-color);

        @media (min-width: 768px) {
            padding-inline: 30px;
        }

        .links-card--header {
            position: relative;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-bottom: 10px;

            & h3 {
                position: relative;
                z-index: 1;
                border-bottom: none;
                padding: 0;
                margin: 0;
                white-space: nowrap;
                font-size: 2.5rem;
                font-weight: 700;
                text-transform: uppercase;
                background-color: var(--page-bg);
            }

            &::after {
                content: '';
                display: block;
                position: absolute;
                border-top: 1px solid var(--border-color);
                top: 50%;
                left: 0;
                right: 0;
            }
        }

        .links-card--card {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: stretch;
            gap: 20px;

            @media (min-width: 800px) {
                display: grid;
                grid-template-columns: 1fr .8fr;
            }

            .product-card {
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                align-items: stretch;
                gap: 20px;

                @media (min-width: 500px) {
                    display: grid;
                    grid-template-columns: repeat(2, 1fr);
                    gap: 30px;
                }

                .product--image img {
                    width: 100%;
                    aspect-ratio: 3 / 2;
                    object-fit: cover;
                }

                .product--detail {
                    & p {
                        font-size: 1.25rem;
                    }

                    & h5 {
                        font-size: 2rem;
                        margin-block-end: .5em;
                    }

                    & strong {
                        font-weight: 700;
                    }

                    .price {
                        font-size: 2rem;

                        & small {
                            font-size: 1.25rem;
                        }
                    }
                }
            }
        }

        .actions-card {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: stretch;
            gap: 20px;

            @media (min-width: 800px) {
                width: 100%;
                max-width: 300px;

                justify-self: flex-end;
            }
        }
    }
}

.new--choices {
    padding-block-end: 10vh;

    @media (min-width: 768px) {
        margin-block-start: 0px;
    }

}