@charset "UTF-8";

/** thumbnail */
.thumb {
    display: block;
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
}

.thumb--3by2 {
    aspect-ratio: 3 / 2;
}

.thumb--21by9 {
    aspect-ratio: 21 / 9;
}

.thumb--16by9 {
    aspect-ratio: 16 / 9;
}

.thumb--4by3 {
    aspect-ratio: 4 / 3;
}

.thumb--course-image {
    aspect-ratio: 394 / 327;
}
@media only screen and (min-width: 620px){
    .thumb--course-image {
        aspect-ratio: 3840 / 984;
    }
}

.thumb--course-content-image {
    aspect-ratio: 1200 / 684;
}

.thumb--border::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    box-shadow: inset 0 0 0 1px #dee2e6;
}

.thumb__img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.thumb__img--contain {
    object-fit: contain;
}

.thumb__img--top {
    object-position: top;
}

.thumb__img--right {
    object-position: right;
}

.thumb__img--bottom {
    object-position: bottom;
}

.thumb__img--left {
    object-position: left;
}


/** Text */
.text-left   { text-align: left; }
.text-right  { text-align: right; }
.text-center { text-align: center; }

/** Text Color */
.text-white { color: #fff; }

/** Text Size */
.text-sm { font-size: 0.875rem; }

/** Display */
.d-none { display: none; }
.d-block { display: block; }
.d-inline-block { display: inline-block; }
.d-inline { display: inline; }
.d-flex { display: flex; }
.d-inline-flex { display: inline-flex; }
.d-grid { display: grid; }

/** Margin */
.m-0 { margin: 0; }
.mb-0 { margin-bottom: 0; }
.mt-0 { margin-top: 0; }
.ml-0 { margin-left: 0; }
.mr-0 { margin-right: 0; }

.ml-1 { margin-left: 0.25rem; }
.ml-2 { margin-left: 0.5rem; }
.ml-3 { margin-left: 1rem; }

.mr-1 { margin-right: 0.25rem; }
.mr-2 { margin-right: 0.5rem; }
.mr-3 { margin-right: 1rem; }