@import "../../scss_components/base_variables";
@import "../../scss_components/mixins";

.stm_lms_courses_grid {
    max-width: 1720px;
    margin: 11px auto 26px !important;
    .stm_lms_courses__grid {
        position: relative;
        &:before {
            content: '';
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            opacity: 0;
            visibility: hidden;
            background-color: rgba(255,255,255,0.5);
            transition: .3s ease;
            z-index: 9999;
        }
        justify-content: center;

        &.stm_lms_courses__grid_6.stm_lms_courses__grid_center {
            .stm_lms_courses__single {
                margin-bottom: 20px;
                &:nth-child(6n + 1),
                &:first-child:not(:last-child) {
                    .stm_lms_courses__single--info {
                        left: 0;
                        right: -100px;
                    }
                }
                &:nth-child(6n),
                &:last-child:not(:first-child) {
                    .stm_lms_courses__single--info {
                        right: 0;
                        left: -100px;
                    }
                }
                &:last-child:nth-child(6n+1) {
                    .stm_lms_courses__single--info {
                        left: -50px;
                        right: -50px;
                    }
                }
            }
        }
        &.loading {
            .stm_lms_courses__single {
                transform: translateY(10px);
                opacity: 0;
            }
        }
    }
    &__top {
        display: flex;
        margin: 0 0 44px;
        align-items: center;
        justify-content: space-between;
        h2 {
            margin-bottom: 0;
            text-transform: uppercase;
        }
    }
    &__counter {
        h3 {
            position: relative;
            top: 7px;
            margin: 0;
            font-size: 24px;
            font-weight: 300;
            strong {
                font-weight: 600;
            }
        }
    }
    &__sort {
        width: 304px;
    }
    &.loading {
        &:before {
            display: none !important;
        }
        .stm_lms_courses__grid {
            &:before {
                opacity: 1;
                visibility: visible;
            }
        }
    }
    .stm_lms_load_more_courses {
        margin: 30px 0 0 !important;
    }
}

@include breakpoint(onlyLaptop) {
    .stm_lms_recent_courses .stm_lms_courses__grid {
        &_6 {
            max-width: 80%;
            margin: 0 auto;
        }
        .stm_lms_courses__single {
            width: 33.3%;
            margin-bottom: 35px;
        }
    }
}

@include breakpoint(tablet) {
    .stm_lms_recent_courses__term {
        margin: 0 7px 15px;
    }
}

@include breakpoint(650px) {
    .stm_lms_courses_grid__top {
        flex-wrap: wrap;
        .stm_lms_courses_grid__counter {
            margin-bottom: 30px;
        }
    }
}