.chapter-card{
    width:  calc(var(--dimension-ratio) * 688px);
    height:  calc(var(--dimension-ratio) * 203px);
    gap:  calc(var(--dimension-ratio) * 20px);
    padding-inline: calc(var(--dimension-ratio) * 20px);
    border-radius:  calc(var(--dimension-ratio) * 20px);
    box-shadow: 4px 4px 20px 0px #A14A6540;
    background-color: var(--light-color);
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
}

.chapter-card h2{
    font-size: var(--font-size-26);
    font-weight: 500;
    line-height: var(--font-size-32);
    text-align: start;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--secondary-color);
    cursor: pointer;
}

.chapter-card p{
    width: calc(var(--dimension-ratio)* 630px);
    height: calc(var(--dimension-ratio)* 100px);
    overflow: hidden;
    font-size: var(--font-size-24);
    font-weight: 300;
    line-height: var(--font-size-36);
    text-align: start;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--sub-secondary-color);
}

.evening-card:hover{
    background-color: var(--main-color);
}

.evening-card:hover h2 {
    color: var(--light-color);
}

.evening-card:hover p {
    color: var(--light-color); 
}

.evening-card{
    width:  calc(var(--dimension-ratio) * 450px);
    /* height:  calc(var(--dimension-ratio) * 490px); */
    gap:  calc(var(--dimension-ratio) * 20px);
    padding: calc(var(--dimension-ratio) * 30px);
    border-radius:  calc(var(--dimension-ratio) * 20px);
    box-shadow: 4px 4px 20px 0px #A14A6540;
    background-color: var(--light-color);
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    cursor: pointer;
}

.evening-card img{
    width:  100%;
    height:  70%;
}

.evening-card h2{
    font-size: var(--font-size-26);
    font-weight: 500;
    line-height: var(--font-size-32);
    text-align: start;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--secondary-color);
}
.evening-card p{
    font-size: var(--font-size-24);
    font-weight: 300;
    line-height: var(--font-size-36);
    text-align: start;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--sub-secondary-color);
}

@media (max-width: 635px) {
    .evening-card {
        width: 42%;
        height: 170px;
    }

    .evening-card h2{
        font-size: 9px;
        line-height: 14px;
    }

    .evening-card p{
        font-size: 8px;
        line-height: 12px;
    }
    .video-description{
        font-size: 11px;
        line-height: 16px;
        width: 86%;
    }
}