.product-banner {
    height: 420px;
    padding: 0;
    background: rgba(0, 0, 0, .3);

    .text-box {
        position: relative;
        // background: rgba(106, 191, 67, .2);
        height: 100%;
        color: #fff;

        h1 {
            font-size: 3em;
            font-weight: 700;
            text-transform: uppercase;
            text-shadow: 2px 2px 1px rgba(0, 0, 0, .5);
        }
    }

    .text-box-inner {
        position: absolute;
        left: 5%;
        right: 5%;
        top: 50%;
        transform: translateY(-50%);
    }

}

.bottom-cover {
    position: absolute;
    height: 100px;
    width: 100%;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(255, 126, 95, 0), rgb(255, 255, 255, 1));
    box-shadow: 0 10px 10px rgba(0, 0, 0, .1), 0 6px 6px rgba(0, 0, 0, .1);
}


section.product-container {
    margin: 5em auto;
    text-align: center;

    .col-inner {
        padding: 2em 3em;
    }

    .carousel-item {
        padding-bottom: 5em;
    }

    .button {
        color: #fff;
        text-wrap: nowrap;
        border-radius: 14px;
        padding: 5px 20px 5px 20px;
        font-size: .9em;
        line-height: 2em;
        text-transform: none;
        display: inline-block;
        background: var(--fs-color-primary);

        &:hover {

        }
    }

    .col-inner {
        background: var(--color-primary);

        &.odd {
            color: white;
            background: var(--color-secondary);

            .button {
                background-color: transparent;
                border: 2px solid var(--color-primary);
                color: #fff;

                &:hover {
                    background: var(--color-primary);
                    color: #fff;
                    opacity: 1;
                }
            }

            a.product-anchor {
                color: white;
            }
        }
    }

    .category-name {
        font-size: 2em;
        font-weight: 700;
        line-height: 2em;
    }

    .category-desc {
        padding: 0;
        font-weight: 700;
    }

    .carousel-control-prev {
        left: -2.5em;
    }

    .carousel-control-next {
        right: -2.5em;
    }

    .carousel-control-prev, .carousel-control-next {
        top: 40%;
        bottom: auto;
        height: 2em;
        width: 2em;
        border: 1px solid #fff;
        border-radius: 50%;
    }

    .product-item {
        padding-top: 2em;
        display: flex;
        flex-direction: column;

        h3 {
            font-size: 1.1em;
            padding: 1em 0;
            font-weight: 700;
        }

        &:hover {
            img {
                transform: scale(1.1);
            }
        }

        a.product-anchor {
            flex: 1;
            color: rgb(33, 37, 41);
            display: block;

            .img-box {
                overflow: hidden;
            }
        }

        img {
            transition: transform .5s;
            width: 100%;
            height: auto;
        }
    }
}