/* recommend　------------------------ */
h3.recommend {
    color: #333;
    display: block;
    font-size: 20px;
    text-align: center;
    margin: 60px auto 10px;
}

div.recommend {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 0 auto;
    text-align: left !important;
}

    div.recommend a {
        display: block;
        position: relative;
        background: #f5f5f5;
        padding: 15px;
        margin-bottom: 10px;
        font-size: 12px;
    }

        div.recommend a:hover {
            opacity: 0.7;
            transition: .3s;
            text-decoration: none;
        }

        div.recommend a::after {
            content: "";
            position: absolute;
            bottom: 0;
            right: 0;
            border: 10px solid;
            border-color: transparent #e94b22 #e94b22 transparent;
        }

        div.recommend a .category {
            background: #666;
            color: #fff;
            border-radius: 100px;
            padding: 2px 8px;
        }

        div.recommend a .course {
            margin: 10px 0;
            color: #36c;
            font-size: 14px;
            font-weight: bold;
            text-decoration: underline dotted #69f;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
        }

        div.recommend a ul {
            list-style-type: none;
            color: #333;
            padding-left: 0px;
        }

@media (min-width: 720px) {
    .session-course-recommend .recommend-title-br {
        display: none;
    }
}

@media (max-width: 720px) {
    .session-course-recommend {
        margin-top: 0px;
    }

        .session-course-recommend .course-container {
            grid-template-columns: repeat(2, 1fr);
        }
}

@media (max-width: 450px) {
    .session-course-recommend .course-container {
        grid-template-columns: 1fr;
    }
}