#page .course-card-view {
    box-shadow: 5px 5px 9px -4px rgba($black, .1);
    padding-bottom: 4rem;
    max-width: 16rem;
    min-width: 12rem;
    overflow: hidden;
    border-bottom: none;
    transition: all .3s ease-in-out;

    &:hover {
        box-shadow: 6px 6px 10px -4px rgba($black, .2);

        .course-card-img div {
            transform: scale(1.05, 1.05);
        }
    }

    .course-card-img div {
        height: 6.5rem;
        background-position: top right;
        background-size: cover;
        transition: all .3s ease-in-out;
    }

    .teachers {
        font-size: .9rem;
    }

    .card-course-link,
    .card-see-more {
        position: absolute;
        bottom: 0;
        width: 100%;

        .btn {
            width: 90%;
            white-space: normal;
            line-height: 1.5rem;
            padding: .5rem .75rem;
            height: auto;
        }
    }

    .enrolmenticon {
        position: absolute;
        background-color: rgba(255, 255, 255, .9);
        top: 72px;
        left: 8px;
        border-radius: $softness;
        .img,
        .icon {
            padding: 4px;
            margin: 0;
        }
    }
}

body #page .card-see-more .btn {
    line-height: 1.3rem;
}

body#page-enrol-index {
    &:not(.fullwidthgeneralbox) .box.generalbox > div {
        @extend .course-card-view;
        position: relative;
    }
    &.fullwidthgeneralbox {
        .course-card-view,
        .box.generalbox > div {
            box-shadow: 5px 5px 9px -4px rgba($black, .1);
            max-width: 100%;
        }
        .flex-grow-1 {
            padding: 0 20px;
        }
        div.courseimage img {
            max-width: 400px;
        }
    }
}

@media (max-width: 769px) {
    #page {
        .card-see-more .btn {
            height: auto;
            font-size: .7rem;
        }
        #frontpage-available-course-list {
            h2 {
                text-align: center;
            }
            .card-deck {
                justify-content: center;
                .course-card-view {
                    width: 100%;
                }
            }
        }
    }
    body#page-enrol-index #region-main {
        padding: 10px 5px !important;
        .generalbox.info {
            div {
                box-shadow: none;
            }
            .d-flex {
                flex-direction: column;
                .courseimage {
                    text-align: center;
                }
                .courseimage,
                .courseimage img,
                .flex-grow-1 {
                    padding: 10px 0;
                    width: 100%;
                }
            }
        }
    }
}
