@import "../helpers/colors.scss";

.content-wrapper {
    // padding: 10% 2%;
    padding-top: 92px;
    width: 100%;
    background-color: #f7f7f7;

    main {
        section {
            &.catalog {
                .cardsContainer {
                    .container-card {
                        height: 450px;
                        overflow: hidden;
                        overflow-y: visible;

                        &.leftContainer {
                            .catalogCarousel {
                                position: relative;
                                top: 10%;

                                .slick-list {
                                    overflow: visible;
                                }

                                .slick-arrow {
                                    position: absolute;
                                    top: 50%;
                                    @include ver-center();
                                    z-index: 400;
                                    cursor: pointer;

                                    &.prevArrow {
                                        left: -5px;
                                    }

                                    &.nextArrow {
                                        right: -5px;
                                    }
                                }

                                .slick-slide {
                                    &:focus {
                                        outline: none;
                                    }

                                    .slide-wrapper {
                                        opacity: 0.55;
                                        outline: none;
                                        margin: 0 auto;
                                        width: 80%;
                                        @include borderCard(#fff);
                                        padding: 20px;
                                        text-align: center;
                                        @include transit(500ms);

                                        img {
                                            margin: 0 auto 5px auto;
                                            height: auto;
                                            width: 112px;
                                            max-height: 154px;
                                        }

                                        h4 {
                                            @include boldFont();
                                            text-transform: uppercase;
                                            color: $black;
                                            font-size: 1.3rem;
                                            min-height: 33px;
                                        }

                                        p {
                                            font-size: 1.4rem;
                                            margin-bottom: 20px;
                                            min-height: 42px;
                                            line-height: 1;
                                        }

                                        a {
                                            background: $green;
                                            border: none;
                                            border-radius: 20px;
                                            color: #fff;
                                            padding: 10px 25px;
                                            @include boldFont();
                                            line-height: 1;

                                            &:hover {
                                                text-decoration: none;
                                            }
                                        }

                                        &:hover {
                                            opacity: 1;
                                            @include scale(scale(1.1));
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
@media (max-width: 1024px) {
    .content-wrapper
        main
        section.catalog
        .cardsContainer
        .container-card.leftContainer
        .catalogCarousel
        .slick-slide
        .slide-wrapper {
        width: 90%;
    }
}