/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

.specs {
    display: flex;
    gap: 2rem;
    overflow-x: auto;
}

@media (max-width: 768px) {
    .specs {
        flex-direction: column;
    }
}

.specs .col {
    padding: 1rem;
    width: 100%;
    background-color: #191919;
    color: var(--e-global-color-secondary);
}

.specs .col h3 {
    color: var(--e-global-color-secondary);
    text-transform: uppercase;
    font-family: var(--e-global-typography-secondary-font-family), Sans-serif;
    font-size: var(--e-global-typography-secondary-font-size);
    font-weight: var(--e-global-typography-secondary-font-weight);
}

.specs h3 a {
    color: var(--e-global-color-secondary);
}

.specs h3 a:hover {
    color: var(--e-global-color-text);
}

.spec-row {
    display: flex;
    padding: .5rem;
    gap: .5rem;
    width: 100%;
}

.spec-row:nth-child(even) {
    background-color: #202020;
}

.spec-row .spec-label {
    width: 100%;
    white-space: nowrap;
    padding-right: 2rem;
    color: var(--e-global-color-text);
}

.spec-value {
    color: var(--e-global-color-text);
    white-space: nowrap;
}

.spec-append {
    white-space: nowrap;
}

/**
 */
.comparison {
    background-color: var(--e-global-color-cac502a);
    gap: 0;
}

@media (max-width: 768px) {
    .specs.comparison {
        flex-direction: row;
        overflow-x: auto;
        min-width: 380px;
    }
}

.specs.comparison .col {
    padding: 0;
}

.specs.comparison .col:not(:first-child) {
    border-left: 1px solid #000;
}

.specs.comparison .col h3 {
    padding: 1rem .5rem;
    margin: 0;
    text-align: right;
    min-width: 150px;
    text-overflow: ellipsis;
    overflow-x: hidden;
}

.specs.comparison h5 {
    background-color: #000;
    color: #555;
    font-size: 10px;
    padding: .4rem .5rem;
    margin: 0;
    text-transform: uppercase;
}

.specs.comparison .col:not(:first-child) .spec-row {
    justify-content: end;
}