/***************************************************************************
* Product Dot Item
****************************************************************************/
.dot_item .item_inner {
    padding: 0;
    background-color: var(--typo-color-black);
    color: #FFFFFF;
    overflow: hidden;
    border-radius: 0.375em;
    height: 100%;
    cursor: pointer;
    transition: all .25s ease;
}
.dot_item .item_inner:hover,
.dot_item.active .item_inner {
    background-color: var(--typo-color-red);
}
.dot_item .item_inner > * {
    pointer-events: none;
}
.dot_item .item_inner img {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.dot_item .item_image {
    overflow: hidden;
}
.dot_item .item_image picture {
    transform: skewY(-4deg);
    display: block;
    transform-origin: 0 0;
}
.dot_item .item_image picture:after {
    content: ''; position: absolute;
    top: auto; left: 0; right: 0; bottom: 0;
    height: 0.25em; width: auto;
    background-color: rgba(255,255,255,0.5);
}
.dot_item .item_image picture img {
    transform: skewY(4deg);
    transform-origin: 0 0;
    bottom: 0.25em;
}
.dot_item .content_title {
    padding: 1em 0.5em 1.5em;
    text-align: center;
}

/***************************************************************************
* Product Item
****************************************************************************/
.product_slider_item {
    padding-left: 3em; 
    padding-right: 3em;
}

.product_slider_item .item_image {
    padding:  0 0 var(--typo-gap);
}
.product_slider_item .item_content img {
    display: none;
}
@media screen and (min-width:40em){
    .product_slider_item .item_image {
        padding:  0 var(--typo-gap) 0 0;
    }
}
@media screen and (min-width:64em){
    .product_slider_item {
        padding-left: 5em; 
        padding-right: 5em;
    }
}