.cards {
    /*grid-auto-flow: dense;*/
    /*width: clamp(20rem, 100em, 95%);*/
    /*max-width: min(1200px, 90%);*/
    display: flex;
    flex-wrap: wrap;

    /*margin-inline: 3rem;*/
    /*padding-inline: 2rem;*/
    margin-inline: auto;
    /*padding-inline: 2em;*/
    gap: 2em;
    justify-content: center;
    grid-template-columns: 1fr;


    @media (min-width: 60rem) {
        grid-template-columns: repeat(3, 1fr);
    }
}

.card {
    flex: 1 1 22em;
    border-radius: 1rem;
    cursor: pointer;
    outline: 3px solid var(--clr-2);
    padding: 1.5rem;
    font-size: var(--fs-400);
    color: var(--clr-3);
    /*max-width: 100%;*/
    /*width: 100%;*/
}


.card-container {
    display: flex;
    gap: 1rem;
    flex-direction: column;

    height: 100%;
}

.card-top-bar {
    display: flex;
    justify-content: space-between;
}

.card-title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding-inline: .2rem;
    font-size: var(--fs-600);
    color: var(--clr-dtg-orange-700);
    text-align: center;
    text-wrap: balance;
    padding-bottom: .2rem;
}

.card-content {
    /*display: grid;*/
    /*grid-template-columns: 1fr;*/
    /*gap: 1rem;*/
}

.card,
.guru-card {
    :hover,
    :focus {
        /*:focus-within {*/
        color: var(--clr-dtg-orange-700);

        .ep-notes-container {
            color: var(--clr-dtg-orange-700);
        }
    }
}

.ep-notes-container {
    flex: 1;
    flex-direction: column;
    /*max-width: 20rem;*/
    line-height: 1.7;
    font-size: var(--fs-500);
    display: -webkit-box;
    -webkit-line-clamp: 10;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--clr-3);
    padding-bottom: -.5rem;


    p {
        padding-bottom: .5rem;
        /*color: #df4817;*/
    }


}

.tag-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: auto;
}

.card-tag {
    display: inline-block;
    border: 2px solid var(--clr-5);
    border-radius: .5rem;
    padding: .2rem;
    font-size: var(--fs-400);
    color: var(--clr-5);
}

.card-tag:hover,
.card-tag:focus {
    /*color: red;*/
    color: var(--clr-3);
    border: 2px solid var(--clr-3);

}


.guru-card-title {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding-inline: .5rem;
    font-size: var(--fs-500);
    color: var(--clr-dtg-orange-700);
    text-align: center;
    text-wrap: balance;
    /*align-content: center;*/


    /*@media (min-width: var(--breakpoint-lg)){*/
    /*@media (min-width: 60rem){*/
    min-height: 8rem;
    /*}*/
    /*background: var(--clr-2);*/

}


.guru-card {
    :hover,
    :focus {
        * {
            color: var(--clr-3)
        }
    }
}


.guru-container {
}

.guru-card {
}