:root {
    --content-card-padding-row: 10px;
    --content-card-padding-cover: 10px;
    --content-card-padding-stacked: 12px;
    --content-card-padding-centered: 14px;
    
    --content-card-gap-l1: 3px;
    --content-card-gap-l2: 8px;
    --content-card-gap-l3: 10px;

    --content-card-media-size-row: 38px;
    --content-card-media-size-cover: 30px;
    --content-card-media-size-stacked: 38px;
    --content-card-media-size-centered: 92px;

    --content-card-badge-offset: -2px;
    --content-card-badge-border-width: 2.5px;
    --content-card-badge-img-size: 20px;
    --content-card-badge-icon-size: 26px;
    --content-card-badge-notif-font-size: 12px;
    --content-card-badge-notif-padding: 3px 5px;
    --content-card-badge-notif-min-width: 11.6px;
    --content-card-badge-notif-letter-spacing: 0.15px;
    --content-card-badge-offset-centered: -2px;
    --content-card-badge-border-width-centered: 3.5px;
    --content-card-badge-img-size-centered: 40px;
    --content-card-badge-icon-size-centered: 40px;
    --content-card-badge-notif-font-size-centered: 17px;
    --content-card-badge-notif-padding-centered: 5px 9px;
    --content-card-badge-notif-min-width-centered: 14.1px;
    --content-card-badge-notif-letter-spacing-centered: 0.1px;

    --content-card-border-radius-row: calc((var(--content-card-media-size-row) + 2 * var(--content-card-padding-row)) / 2);
    --content-card-border-radius-cover: calc(var(--content-card-media-size-cover) / 2 + var(--content-card-padding-cover));
    --content-card-border-radius-stacked: var(--secondary-border-radius);
    --content-card-border-radius-centered: var(--secondary-border-radius);
}

.content-card {
    display: table;
    width: 100%;
    height: 100%;
}

.content-card-btn {
    display: table;
    width: 100%;
    height: 100%;
    background-color: transparent;
    position: relative;
    overflow: hidden;
    -webkit-transition: background-color 0.15s ease-out;
    -moz-transition: background-color 0.15s ease-out;
    -ms-transition: background-color 0.15s ease-out;
    -o-transition: background-color 0.15s ease-out;
    transition: background-color 0.15s ease-out;
}

.content-card-btn:hover,
.content-card-btn:focus {
    background-color: var(--accent-color-soft-l1);
}

.content-card-selected .content-card-btn {
    background-color: var(--accent-color-soft-l2);
}

.content-card-type-stacked .content-card-btn {
    background-color: var(--accent-color-soft-l2);
}

.content-card-type-stacked .content-card-btn:hover,
.content-card-type-stacked .content-card-btn:focus,
.content-card-selected.content-card-type-stacked .content-card-btn {
    background-color: var(--accent-color-soft-l3);
}

.content-card-type-row .content-card-btn {
    padding: var(--content-card-padding-row);
    border-radius: var(--content-card-border-radius-row);
}

.content-card-type-cover .content-card-btn {
    padding: var(--content-card-padding-cover);
    border-radius: var(--content-card-border-radius-cover);
}

.content-card-type-stacked .content-card-btn {
    padding: var(--content-card-padding-stacked);
    border-radius: var(--content-card-border-radius-stacked);
}

.content-card-type-centered .content-card-btn {
    padding: var(--content-card-padding-centered);
    border-radius: var(--content-card-border-radius-centered);
}

.content-card-layout {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
}

.content-card-type-row .content-card-layout {
    gap: 0px;
}

.content-card-type-cover .content-card-layout {
    gap: var(--content-card-gap-l2);
}

.content-card-type-stacked .content-card-layout {
    gap: var(--content-card-gap-l3);
}

.content-card-type-centered .content-card-layout {
    gap: var(--content-card-gap-l2);
    align-items: center;
    text-align: center;
}

.content-card-cover-media-area {
    display: flex;
    height: auto;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: calc(var(--content-card-border-radius-cover) - var(--content-card-padding-cover));
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: var(--color-media-shadow);
}

.content-card-cover-media-area img {
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    position: absolute;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.content-card-about-row-layout {
    display: flex;
    flex-direction: row;
    width: 100%;
}

.content-card-type-row .content-card-about-row-layout {
    gap: var(--content-card-padding-row);
}

.content-card-type-cover .content-card-about-row-layout {
    gap: var(--content-card-gap-l2);
}

.content-card-about-area {
    display: block;
}

.content-card-type-stacked .content-card-about-area {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--content-card-gap-l2);
}

.content-card-type-centered .content-card-about-area {
    display: flex;
    justify-content: center;
}

.content-card-media-position {
    display: table;
    position: relative;
    flex-shrink: 0;
}

.content-card-media-size {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    border-radius: 50%;
}

.content-card-type-row .content-card-media-size {
    height: var(--content-card-media-size-row);
    width: var(--content-card-media-size-row);
    box-shadow: var(--color-media-shadow);
}

.content-card-type-cover .content-card-media-size {
    height: var(--content-card-media-size-cover);
    width: var(--content-card-media-size-cover);
    box-shadow: var(--color-media-shadow-sm);
}

.content-card-type-stacked .content-card-media-size {
    height: var(--content-card-media-size-stacked);
    width: var(--content-card-media-size-stacked);
    box-shadow: var(--color-media-shadow);
}

.content-card-type-centered .content-card-media-size {
    height: var(--content-card-media-size-centered);
    width: var(--content-card-media-size-centered);
    box-shadow: var(--color-media-shadow);
}

.content-card-media-size img {
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    position: absolute;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.content-card-media-icon {
    background: var(--accent-color-solid);
}

.content-card-icon {
    color: var(--accent-color-ink-on-solid);
    max-width: var(--field-icon-max-width);
    max-height: var(--field-icon-max-height);
}

.content-card-badge-area {
    display: flex;
    align-items: center;
    position: absolute;
    right: var(--content-card-badge-offset);
    bottom: var(--content-card-badge-offset);
}

.content-card-type-centered .content-card-badge-area {
    right: var(--content-card-badge-offset-centered);
    bottom: var(--content-card-badge-offset-centered);
}

.content-card-badge-wrp {
    display: table;
    border: var(--content-card-badge-border-width) solid var(--accent-color-surface-l1);
    border-radius: 999px;
    overflow: hidden;
}

.content-card-type-centered .content-card-badge-wrp {
    border-width: var(--content-card-badge-border-width-centered);
}

.content-card-notification-badge {
    background-color: var(--color-control-red);
    padding: var(--content-card-badge-notif-padding);
}

.content-card-type-centered .content-card-notification-badge {
    padding: var(--content-card-badge-notif-padding-centered);
}

.content-card-notification-badge span {
    display: block;
    min-width: var(--content-card-badge-notif-min-width);
    color: var(--color-ink-on-control);
    font-size: var(--content-card-badge-notif-font-size);
    line-height: 1.3;
    text-align: center;
    letter-spacing: var(--content-card-badge-notif-letter-spacing);
    white-space: nowrap;
}

.content-card-type-centered .content-card-notification-badge span {
    min-width: var(--content-card-badge-notif-min-width-centered);
    font-size: var(--content-card-badge-notif-font-size-centered);
    letter-spacing: var(--content-card-badge-notif-letter-spacing-centered);
}

.content-card-img-badge img {
    height: var(--content-card-badge-img-size);
    width: var(--content-card-badge-img-size);
}

.content-card-type-centered .content-card-img-badge img {
    height: var(--content-card-badge-img-size-centered);
    width: var(--content-card-badge-img-size-centered);
}

.content-card-icon-badge {
    display: flex;
    height: var(--content-card-badge-icon-size);
    width: var(--content-card-badge-icon-size);
    align-items: center;
    justify-content: center;
    background: var(--accent-color-solid);
}

.content-card-type-centered .content-card-icon-badge {
    height: var(--content-card-badge-icon-size-centered);
    width: var(--content-card-badge-icon-size-centered);
}

.content-card-icon-badge svg {
    color: var(--accent-color-ink-on-solid);
    max-width: var(--field-icon-max-width);
    max-height: var(--field-icon-max-height);
}

.content-card-details-area {
    display: flex;
    flex-direction: column;
    gap: var(--content-card-gap-l1);
}

.content-card-type-row .content-card-details-area,
.content-card-type-cover .content-card-details-area {
    flex: 1;
    min-width: 0;
    justify-content: center;
}

.content-card-type-centered .content-card-details-area {
    align-items: center;
}

.content-card-heading-area {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    row-gap: var(--content-card-gap-l1);
    column-gap: var(--content-card-gap-l3);
}

.content-card-type-centered .content-card-heading-area {
    justify-content: center;
}

.content-card-title {
    display: block;
    flex: 0 1 auto;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.15px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    display: -webkit-box;
}

.content-card-type-row .content-card-title,
.content-card-type-centered .content-card-title,
.content-card-type-stacked .content-card-title {
    max-height: calc(16px * 1.4 * 2);
    line-clamp: 2;
    -webkit-line-clamp: 2;
}

.content-card-type-cover .content-card-title {
    max-height: calc(16px * 1.4 * 1);
    line-clamp: 1;
    -webkit-line-clamp: 1;
}

.content-card-selected .content-card-title {
    letter-spacing: -0.05px;
    font-weight: 600;
}

.content-card-type-centered .content-card-title {
    text-align: center;
}

.content-card-meta-area {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    column-gap: calc(var(--content-card-gap-l3) / 2);
    row-gap: var(--content-card-gap-l1);
}

.content-card-type-centered .content-card-meta-area {
    justify-content: center;
}

.content-card-dots-area,
.content-card-labels-area {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 3px;
}

.content-card-dots-area {
    row-gap: 0px;
}

.content-card-labels-area {
    row-gap: 3px;
}

.content-card-type-centered .content-card-dots-area,
.content-card-type-centered .content-card-labels-area {
    justify-content: center;
}

.content-card-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: 4px 0px;
    background-color: var(--accent-color-solid);
}

.content-card-label-wrp {
    display: inline-block;
    max-width: 100%;
    border-radius: calc(20.5px / 2);
    overflow: hidden;
    padding: 2px 6px;
    background-color: var(--accent-color-solid);
}

.content-card-label-wrp span {
    display: block;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0px;
    color: var(--accent-color-ink-on-solid);
    overflow-wrap: anywhere;
}

.content-card-note {
    display: block;
    color: var(--color-neutral-l2);
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: 0.1px;
    overflow: hidden;
    margin-top: -2px;
    white-space: pre-line;
    overflow: hidden;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-transition: color 0.15s ease-out;
    -moz-transition: color 0.15s ease-out;
    -ms-transition: color 0.15s ease-out;
    -o-transition: color 0.15s ease-out;
    transition: color 0.15s ease-out;
}

.content-card-type-centered .content-card-note {
    text-align: center;
}

.content-card-type-row .content-card-note,
.content-card-type-centered .content-card-note,
.content-card-type-stacked .content-card-note {
    max-height: calc(14px * 1.4 * 3);
    line-clamp: 3;
    -webkit-line-clamp: 3;
}

.content-card-type-cover .content-card-note {
    max-height: calc(14px * 1.4 * 2);
    line-clamp: 2;
    -webkit-line-clamp: 2;
}