.at-compareTable__overview {
    position: relative;
}

.at-compareTable__comparison {
    width: 100%;
    padding: 1.8em 20px 2.2em;
    border-radius: 24px;
    background-color: var(--cloudy);
}

.at-compareTable__comparison .table-wrapper {
    margin-bottom: 0;
}

.at-compareTable__table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

.at-compareTable__caption {
    position: absolute;
    left: -999em;
}

.at-compareTable__featureTitle {
    position: absolute;
    left: -999em;
}

.at-compareTable__cell {
    padding: 1.3em .5em;
    border-bottom: 1px solid var(--darker-100);
}

.at-compareTable__cell:first-child {
    padding-left: 0;
}

tr:last-child .at-compareTable__cell {
    border-bottom: 0;
}

.at-compareTable__cell--productName {
    font-family: var(--fam-headings);
}

.at-compareTable__cell--productName:nth-child(n+3) {
    font-weight: 600
}

.at-compareTable__logo {
    width: 120px;
    max-height: 50px;
}

.at-compareTable__featureName,
.at-compareTable__subTitle {
    display: block;
    text-align: left;
}

.at-compareTable__featureName {
    font-family: var(--fam-headings);
}

.at-compareTable__subTitle {
    font-weight: normal;
}

.at-compareTable__subTitle a {
    color: inherit;
    text-decoration: underline;
}

.at-compareTable__cell--state {
    width: 20%;
    text-align: center;
}

/**
 * State
 */

.at-compareTable__stateText {
    position: absolute;
    left: -999em;
}

.at-compareTable__state::before,
.at-compareTable__stateLink::before {
    font-family: var(--fam-icons);
}

.at-compareTable__state--check::before {
    content: '\2713';
    font-size: var(--size-medium);
    color: var(--green-600);
}

.at-compareTable__state--cross::before {
    content: '\d7';
    color: var(--indigo-300);
}

.at-compareTable__stateLink,
.at-compareTable__stateLink:hover {
    color: var(--indigo);
    font-size: var(--size-small);
    text-decoration: none;
}

.at-compareTable__stateLink {
    display: block;
}

.at-compareTable__stateLink::before {
    content: '\2b';
    display: block;
    margin-bottom: -0.2em;
    font-size: var(--size-medium);
    color: var(--sapphire);
    transition: translate 0.2s ease;
}

.at-compareTable__stateLink:hover::before {
    translate: 0 -3px;
    color: var(--sapphire);
}

/**
 * Price
 */

.at-compareTable__table tfoot .at-compareTable__cell[colspan='2'] {
    text-align: right;
}

.at-compareTable__priceLabel {
    position: absolute;
    left: -999em;
}

.at-compareTable__preposition {
    display: block;
    font-size: var(--size-small);
    color: var(--indigo-300);
}

.at-compareTable__price {
    font-family: var(--fam-headings);
}

.at-compareTable__price::after {
    position: absolute;/** Prevent the '>' from becoming an orphan on the next line */
}

tfoot .at-compareTable__cell {
    border-top: 1px solid var(--darker-200);
}

@media screen and (max-width: 399px) {
    .at-compareTable__comparison {
        font-size: var(--size-small);
    }
}

@media screen and (min-width: 400px) {
    .at-compareTable__comparison {
        padding: 1em 1em 2.2em;
    }
}

/** Because we deviate from the default/agent styles we apply a max-width media query to avoid heavy selectors
 */
@media screen and (max-width: 689px) {
    .at-compareTable__cell--state {
        width: 7em;
        font-size: var(--size-small);
    }

    .at-compareTable__featureName {
        font-weight: 600;
        position: relative;
    }

    .at-compareTable__subTitle {
        display: none;
    }
}

@media screen and (min-width: 690px) {
    .at-compareTable__cell {
        padding: .7em;
        border-color: var(--darker-50);
    }

    .at-compareTable__featureName {
        font-size: var(--size-medium);
    }
}

@media screen and (min-width: 960px) {
    .at-compareTable__comparison {
        padding: 3em 4em;
    }
}