:root {
    /* Colors */
    --bg: #000;
    --text: #fff;
    --accent: #ffd400;
    --text-gray: #ccc;
    --text-gray-alt: #6b7280;

    /* Borders */
    --border-color: var(--text);
    --border-width: 0.3rem;
    --border-style: double;
    --radius: 6px;
}


/* Newspaper */
.comics_container {
    width: 3200px;
    max-width: 80%;
    min-width: 220px;
    margin: 64px auto;
    font-size: 0.9rem;
}

.comics_cc2 {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    border-radius: 8px;
    border-width: var(--border-width);
    border-style: var(--border-style);
    border-color: var(--border-color);
    overflow: hidden;
    padding: 8px;
}

.comics_image {
    width: 256px;
    height: 128px;
    flex: 0 0 256px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--bg);
}

.comics_image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.comics_title {
    display: block;
    font-weight: 600;
    font-size: 1.60rem;
    color: var(--accent);
    margin: 0 0 1.5rem 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    }
    
    .comics_sub {
    display: block;
    font-size: 0.88rem;
    color: var(--text-gray);
    margin: 0 0 0.15rem 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    }
    
    .comics_link {
    display: block;
    font-size: 0.78rem;
    color: var(--text-gray-alt);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    }

/* Small variant & responsive tweaks */
.comics_container.small {
    width: 240px;
    font-size: 0.85rem;
}

@media (max-width:420px) {
    .comics_container {
        width: 90%;
        max-width: 320px;
    }

    .comics_image {
        width: 48px;
        height: 48px;
        flex: 0 0 48px;
    }
}