.pbds-dyncms--contents.video,
.pbds-dyncms--contents.video * {
    --video-height: 630px;
    @media (max-width: 1080px) {
        --video-height: 420px;
    }
    @media (max-width: 769px) {
        --video-height: 268px;
    }
}
.pbds-dyncms--contents.video {
    position: relative;
    border-radius: 5px;
    overflow: hidden;
    background-color: white;
    a {
        width: 100%;
        height: 100%;
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        z-index: 5;
        opacity: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        color: var(--clr-white);
        text-transform: uppercase;
        background: rgba(0,0,0,0.7);
        transition: all 0.3s ease-out;
        &:not([class*=jsVideo]) {
            display: none;
        }
        &:hover {
            opacity: 1;
        }
    }
    .pbds-video {
        position: relative;
        z-index: 1;
    }
}
.pbds-dyncms--contents.banner,
.pbds-dyncms--contents.banner * {
    --bnr--height: 307px;
    --bnr--padding-x: 40px;
    --bnr--padding-y: 20px;
    --bnr--align-x: center;
    --bnr--align-y: center;
    --bnr--subtitle-font: var(--type-subMd--size);
    --bnr--subtitle-weight: var(--type-subMd--weight);
    --bnr--subtitle-spacer: 10px;
    --bnr--title-font: var(--type-titleMd--size);
    --bnr--title-weight: var(--type-titleMd--weight);
}
.pbds-dyncms--contents.banner {
    .pbds-banner {
        transition: var(--fx);
        &:hover {
            transform: scale(1.01);
        }
    }
}
.pbds-dyncms--contents.product,
.pbds-dyncms--contents.product * {
    --radius: 10px;
    --content-cols: 38% 1fr;
    --content-areas: "content media";
    --content-padding: 40px;
    --content-spacer: 40px;
    --content-clamp: 3;
    --still-size: 202px;
    --ambient-height: 600px;
    @media (max-width: 1520px) {
        --ambient-height: 675px;
    }
    @media (max-width: 1080px) {
        --content-cols: 100%;
        --content-areas: "media" "content" ;
        --content-clamp: 2;
        --ambient-ratio: 726 / 429;
        --ambient-height: 600px;
    }
    @media (max-width: 600px) {
        --content-padding: 40px 20px;
        --content-spacer: 20px;
        --ambient-ratio: 280 / 165;
        --ambient-height: unset;
    }
}
.pbds-dyncms--contents.product {
    border-radius: var(--radius);
    border: 1px solid var(--clr-gray-100);
    overflow: hidden;
    background-color: white;
    .component--wrapper {
        display: grid;
        grid-template-columns: var(--content-cols);
        grid-template-areas: var(--content-areas);
        .content--wrapper{
            grid-area: content;
            padding: var(--content-padding);
            header {
                margin: 0 0 2px;
                span {
                    font-weight: 500;
                }
            }
            .labels {
                display: flex;
                flex-wrap: wrap;
                gap: 4px;
                margin: 0 0 10px;
            }
            .storytelling {
                .limiter {
                    display: -webkit-box;
                    -webkit-line-clamp: var(--content-clamp);
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    margin: 0 0 8px;
                }
            }
            .product-container {
                margin: 30px 0 28px;
                text-align: center;
                .image {
                    img {
                        width: var(--still-size);
                        aspect-ratio: 1;
                        border-radius: 5px;
                    }
                }
            }
            .action-container {
                text-align: center;
                .pbds-btn {
                    max-width: 330px;
                    width: 100%;
                }
            }
        }
        .media--wrapper{
            grid-area: media;
            .media {
                width: 100%;
                height: 100%;
                max-height: var(--ambient-height);
                img {
                    width: 100%;
                    height: 100%;
                    max-height: var(--ambient-height);
                    display: block;
                    aspect-ratio: var(--ambient-ratio);
                    object-fit: cover;
                    object-position: center;
                }
                @media (max-width: 1080px) {
                    height: auto;
                    img {
                        height: auto;
                    }
                }
            }
        }
    }
}
.pbds-dyncms--contents.line,
.pbds-dyncms--contents.line * {
    --radius: 10px;
    --content-cols: 38% 1fr;
    --content-areas: "content media";
    --content-padding: 40px;
    --content-spacer: 40px;
    --content-clamp: 3;
    --still-ration: 1;
    --ambient-height: 600px;
    @media (max-width: 1520px) {
        --ambient-height: 675px;
    }
    @media (max-width: 1080px) {
        --content-cols: 100%;
        --content-areas: "media" "content";
        --content-clamp: 2;
        --ambient-ratio: 726 / 429;
        --ambient-height: 600px;
    }
    @media (max-width: 600px) {
        --content-padding: 40px 20px;
        --content-spacer: 20px;
        --ambient-ratio: 280 / 165;
        --ambient-height: unset;
    }
}
.pbds-dyncms--contents.line {
    border-radius: var(--radius);
    border: 1px solid var(--clr-gray-100);
    overflow: hidden;
    background-color: white;
    .component--wrapper {
        display: grid;
        grid-template-columns: var(--content-cols);
        grid-template-areas: var(--content-areas);
        .content--wrapper{
            grid-area: content;
            padding: var(--content-padding);
            header {
                margin: 0 0 2px;
                span {
                    font-weight: 500;
                }
            }
            .labels {
                display: flex;
                flex-wrap: wrap;
                gap: 4px;
                margin: 0 0 10px;
            }
            .storytelling {
                .limiter {
                    display: -webkit-box;
                    -webkit-line-clamp: var(--content-clamp);
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    margin: 0 0 8px;
                }
            }
            .carousel-container {
                margin: 30px 0 20px;
                .group-item {
                    padding: 8px;
                    .image {
                        width: 100%;
                        aspect-ratio: 1;
                        display: block;
                        border-radius: 5px;
                        border: 1px solid var(--clr-gray-100);
                        img {
                            width: 100%;
                            aspect-ratio: 1;
                            border-radius: 5px;
                            transition: all 0.3s ease-out;
                        }
                    }
                    .line,
                    .group {
                        display: block;
                        font-size: 1rem;
                        font-weight: 300;
                        color: var(--clr-gray-700);
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        transition: all 0.3s ease-out;
                        overflow: hidden;
                    }
                    .variations {
                        display: block;
                        font-size: 0.75rem;
                        font-weight: 400;
                        color: var(--clr-gray-400);
                        
                    }
                    .shortcut-indicator {
                        display: none;
                    }
                    :hover {
                        .image {
                            img {
                                transform: scale(1.03);
                            }
                        }
                        .line,
                        .group {
                            font-weight: 500;
                        }
                    }   
                }
                .splide__arrows {
                    .splide__arrow--prev {
                        margin-top: -4%;
                        left: -10px;
                    }
                    .splide__arrow--next {
                        margin-top: -4%;
                        right: -10px;
                    }
                    @media (max-width: 1520px) {
                        .splide__arrow--prev,
                        .splide__arrow--next {
                            margin-top: -6%;
                        }
                        
                    }
                    @media (max-width: 1080px) {
                        .splide__arrow--prev,
                        .splide__arrow--next {
                            margin-top: -3%;
                        }
                        
                    }
                    @media (max-width: 769px) {
                        .splide__arrow--prev,
                        .splide__arrow--next {
                            margin-top: -5%;
                        }
                        
                    }
                    @media (max-width: 600px) {
                        .splide__arrow--prev,
                        .splide__arrow--next {
                            margin-top: -7%;
                        }
                        
                    }
                }
            }
            .action-container {
                text-align: center;
                .pbds-btn {
                    max-width: 330px;
                    width: 100%;
                }
            }
        }
        .media--wrapper{
            grid-area: media;
            .media {
                width: 100%;
                height: 100%;
                max-height: var(--ambient-height);
                img {
                    width: 100%;
                    height: 100%;
                    max-height: var(--ambient-height);
                    display: block;
                    aspect-ratio: var(--ambient-ratio);
                    object-fit: cover;
                    object-position: center;
                }
                @media (max-width: 1080px) {
                    height: auto;
                    img {
                        height: auto;
                    }
                }
            }
        }
    }
}


/*# sourceMappingURL=pbds-dyncms--contents-pbds-dyncms--contents-css.dev.bundle.7362d0c7c67fc8a14381.css.map*/