@layer components {
    .comparison-container {
        width: 100%;
        overflow-x: auto;
        margin: 0 auto;
    }

    .comparison-table {
        width: 80%;
        border-collapse: collapse;
        text-align: center;
        margin-top: 1rem;
        margin: auto;
    }

    .comparison-table thead {
        background-color: #f0f0f0;
    }

    .comparison-table th,
    .comparison-table td {
        padding: 0.75rem;
        border: 1px solid #ccc;
    }

    .comparison-table td {
        font-size: 1.15rem;
    }

    th em {
        display: block;
        font-style: italic;
        font-size: 0.95rem;
        margin-top: 4px;
    }

    th .competitor-label {
        display: inline-block;
        font-size: 1.4rem;
        line-height: 1.35;
    }

    thead tr {
        background-color: #C0C4C8;
    }

    /* Zebra shading */
    tr:nth-child(even) {
        background-color: #e1e4e7;
    }

    @media (max-width: 1280px) {
        th .competitor-label {
            font-size: 1.2rem;
        }

        .comparison-table td {
            font-size: 1rem;
        }

        th em {
            font-size: 0.90rem;
        }
    }

    @media (max-width: 768px) {

        .comparison-container {
            width: 90%;
            overflow-x: auto;
        }

        .comparison-table th,
        .comparison-table td {
            font-size: 0.94rem;
        }

        th .competitor-label {
            font-size: 1.1rem;
        }

        .comparison-table {
            min-width: 900px;
        }
    }
}