.card-image-wrapper {
    display: block;
    width: 100%;
}

html[data-primary-font="Thunder"] .card-top {
    margin-bottom: max(6px, calc(0.42vw * var(--scale)));
}

.card-top {
    grid-column-gap: max(6px, calc(0.42vw * var(--scale)));
    grid-row-gap: max(6px, calc(0.42vw * var(--scale)));
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: max(8px, calc(0.56vw * var(--scale)));
    display: flex;
}

.card-top .medium-text {
    color: var(--text-color);
    font-size: max(calc(20px * var(--heading-font-scale)), calc(1.39vw * var(--scale) * var(--heading-font-scale)));
    font-weight: 600;
}

html[data-primary-font="Thunder"] .card .restricted-access-icon {
    margin-bottom: max(calc(6px * var(--heading-font-scale) * var(--heading-font-line-height-scale)), calc(0.42vw * var(--scale) * var(--heading-font-scale) * var(--heading-font-line-height-scale)));
}

.card .restricted-access-icon {
    min-width: max(calc(16px * var(--heading-font-scale)), calc(1.11vw * var(--scale) * var(--heading-font-scale)));
    width: max(calc(16px * var(--heading-font-scale)), calc(1.11vw * var(--scale) * var(--heading-font-scale)));
    height: max(calc(16px * var(--heading-font-scale)), calc(1.11vw * var(--scale) * var(--heading-font-scale)));
}

.bracket-no-gap {
    gap: 0px !important;
}

html[data-primary-font="Thunder"] .card .left-bracket,
html[data-primary-font="Thunder"] .card .right-bracket {
    padding-bottom: max(2px, calc(0.14vw * var(--scale)));
}

.card-content {
    margin-top: max(16px, calc(1.11vw * var(--scale)));
}

.card-text {
    color: var(--text-color);
    font-weight: 500;
    line-height: calc(100% * var(--heading-font-line-height-scale));
    text-decoration: none;
    display: block;
    font-size: max(calc(30px * var(--heading-font-scale)), calc(2.08vw * var(--scale) * var(--heading-font-scale)));
}

html[data-primary-font="Thunder"] .card-excerpt {
    margin-top: max(3px, calc(0.21vw * var(--scale)));
}

.card-excerpt {
    margin-top: max(8px, calc(0.56vw * var(--scale)));
}

.card-title-and-circle-wrapper {
    position: relative;
    width: fit-content;
}

html[data-primary-font="Thunder"] .card-circle {
    top: calc(50% - max(calc(4px * (var(--heading-font-scale) + var(--circle-scale))), calc(0.28vw * var(--scale) * (var(--heading-font-scale) + var(--circle-scale)))));
}

.card-circle {
    top: 50%;
    position: absolute;
    left: 0px;
    border-radius: 100%;
    width: max(calc(10px * (var(--heading-font-scale) + var(--circle-scale))), calc(0.69vw * var(--scale) * (var(--heading-font-scale) + var(--circle-scale))));
    height: max(calc(10px * (var(--heading-font-scale) + var(--circle-scale))), calc(0.69vw * var(--scale) * (var(--heading-font-scale) + var(--circle-scale))));
    background-color: var(--text-color);
    opacity: 0;
    transform: translateX(calc(-50% - calc(max(13px, 0.8vw)))) translateY(-50%) scale(0);
    will-change: transform, opacity;
    transition: transform 0.25s var(--bounce-past-transition), opacity 0.2s linear;
}

.card-title-and-circle-wrapper:hover .card-circle {
    opacity: 1;
    transform: translateX(calc(-50% - calc(max(13px, 0.8vw)))) translateY(-50%) scale(1);
}

.tag-card .card-image-wrapper {
    aspect-ratio: 4/3;
}

.tag-card .card-text {
    font-size: max(calc(26px * var(--heading-font-scale)), calc(1.81vw * var(--scale) * var(--heading-font-scale)));
}

.tag-card .card-small-text {
    opacity: 0.7;
}

html[data-primary-font="Thunder"] .tag-card .card-small-text {
    margin-top: max(2px, calc(0.14vw * var(--scale)));
}

.tag-card .card-small-text {
    margin-top: max(4px, calc(0.28vw * var(--scale)));
}

@media screen and (max-width: 1080px) {
    .card-title-and-circle-wrapper:hover .card-circle {
        opacity: 0;
        transform: translateX(calc(-50% - calc(max(13px, 0.6vw)))) scale(0);
    }
}

@media screen and (max-width: 767px) { 
    .tag-card .card-content {
        margin-top: 12px;
    }

    .tag-card .card-text {
        font-size: calc(22px * var(--heading-font-scale));
    }

    .tag-card .card-small-text p {
        font-size: 14px;
    }

    .tag-card .card-small-text {
        margin-top: 2px;
    }

    html[data-primary-font="Thunder"] .tag-card .card-small-text {
        margin-top: 0px;
    }
}