/*
 * PivotLab - videos (views/lists/videos.php): the old view's <style> block, scoped under
 * [data-pl-view="videos"], with its nested rules as the old file had them.
 */

[data-pl-view="videos"] {
    height: 100%;
    display: flex;
    flex-direction: column;

    .catalog-list {
        @media (min-width: 992px) {
            margin-top: 32px;
        }
    }

    #pills-tab {
        button {
            border-radius: 0px;
            text-transform: uppercase;
            color: #12161D;
            border: 2px solid #12161D;
            margin-left: 4px;
            margin-right: 4px;
            padding: 6px 24px;
            background: #fff;
        }

        button.active {
            background: #12161D;
            color: #fff;
        }
    }

    .categories .card-wrapper {
        border: 1px solid #EFEFF0;
        border-radius: 8px;
        padding: 8px;
    }

    .category-card {
        position: relative;
        overflow: hidden;
        border-radius: 8px;

        &:hover .card-img-top {
            transform: scale(1.3);
        }

        .card-img-top {
            aspect-ratio: 366 / 200;
            object-fit: cover;
            transition: transform 0.7s !important;
        }

        .card-body {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            background: rgba(0, 0, 0, .4);
            font-size: 16px;
            font-weight: 600;
            text-decoration: none;
            text-transform: uppercase;

            @media (min-width: 992px) {
                font-size: 21px;
            }
        }
    }

    .product-card {
        text-decoration: none;
        border: 1px solid #EFEFF0;
        border-radius: 8px;
        padding: 8px;

        &:hover .card-img-top {
            /* transform: scale(1.3); */
        }

        .img-container {
            overflow: hidden;
            background-color: #E4E4E433;
        }

        .card-body {
            padding: 8px 8px 4px;

        }

        .card-img-top {
            aspect-ratio: 366 / 200;
            object-fit: contain;
            transition: transform 0.7s !important;
            mix-blend-mode: multiply;
        }

        .product-title {
            text-align: center;
            font-size: 15px;
            color: #19191B;

            @media (min-width: 992px) {
                font-size: 16px;
            }
        }

        .product-subtitle {
            text-align: center;
            font-size: 12px;
            color: #61646B;
            @media (min-width: 992px) {
                font-size: 13px;
            }
        }

    }
}