/* Shared by the adopted lesson and its independent design preview. */
.ct-hero .ct-course-heading {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-block: 4px 18px;
    min-width: 0;
}
.ct-hero .ct-course-cover {
    display: block;
    flex: 0 0 auto;
    width: 108px;
    height: 108px;
    object-fit: contain;
    border-radius: 10px;
    border: 1px solid #e7dfed;
    background: #fff;
    box-shadow: 0 4px 14px #33234408;
}
.ct-hero .ct-course-heading h1 {
    min-width: 0;
    flex: 1;
}
.ct-hero .ct-course-heading h1 [lang="en"] {
    margin-bottom: 0;
}
[dir="rtl"] .ct-hero .ct-course-heading {
    flex-direction: row;
    text-align: right;
}
[dir="ltr"] .ct-hero .ct-course-heading {
    flex-direction: row;
    text-align: left;
}
[data-ct-lesson-theme="dark"] .ct-hero .ct-course-cover {
    border-color: #584461;
    box-shadow: 0 4px 16px #0002;
}
@media (min-width: 601px) and (max-width: 800px) {
    .ct-hero .ct-course-heading {
        gap: 13px;
    }
    .ct-hero .ct-course-cover {
        width: 88px;
        height: 88px;
        border-radius: 9px;
    }
    .ct-hero .ct-course-heading h1 [lang="ar"] {
        font-size: 26px;
    }
    .ct-hero .ct-course-heading h1 [lang="en"] {
        font-size: 17px;
    }
}
@media (max-width: 600px) {
    .ct-hero .ct-course-heading {
        gap: 12px;
        margin-bottom: 20px;
    }
    .ct-hero .ct-course-cover {
        width: 80px;
        height: 80px;
        border-radius: 8px;
    }
    .ct-hero .ct-course-heading h1 [lang="ar"] {
        font-size: clamp(19px, 6vw, 25px);
        letter-spacing: -0.7px;
    }
    .ct-hero .ct-course-heading h1 [lang="en"] {
        font-size: 15px;
        letter-spacing: -0.35px;
    }
}
@media (max-width: 360px) {
    .ct-hero .ct-course-heading {
        gap: 10px;
    }
    .ct-hero .ct-course-cover {
        width: 64px;
        height: 72px;
    }
    .ct-hero .ct-course-heading h1 [lang="en"] {
        font-size: 13px;
    }
}