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

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)));
}

.latest-posts-header {
    display: flex;
    flex-direction: column;
    gap: max(18px, calc(1.25vw * var(--scale)));
    margin-bottom: max(32px, calc(2.22vw * var(--scale)));
}

.category-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: max(6px, calc(0.42vw * var(--scale)));
    padding: 0 max(26px, 1.8vw);
}

.category-button {
    padding: max(12px, calc(0.84vw * var(--scale))) max(20px, calc(1.39vw * var(--scale)));
    background-color: var(--background-color);
    color: var(--text-color);
    border: 1px solid var(--text-color);
    display: flex;
    align-items: center;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.category-button:hover {
    background-color: var(--text-color);
    color: var(--background-color);
}

.star {
    width: max(24px, calc(1.67vw * var(--scale)));
    height: max(24px, calc(1.67vw * var(--scale)));
    top: max(12px, calc(0.83vw * var(--scale)));
    right: max(12px, calc(0.83vw * var(--scale)));
    z-index: 2;
    position: absolute;
    color: var(--overlay-text-color);
}

.star.dark {
    color: var(--text-color);
}

/* @keyframes star-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.star-animation {
  animation: star-rotate 5s linear infinite;
} */

@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);
    }

    .category-buttons {
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .category-button {
        white-space: nowrap;
    }

    .category-button:hover {
        background-color: var(--background-color);
        color: var(--text-color);
    }

}

@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;
    }

    .latest-posts-header {
        margin-bottom: 20px;
        gap: 10px;
    }

    .category-buttons {
        padding: 0 18px;
    }
}