
.list-container.number-labels-on .list-item-wrapper {
    display: grid;
    grid-template-columns: 11rem auto;
    gap: 3rem;
    align-items: center;
}

.list-container .list-item {
    padding-block: 4rem;
}

.list-container.gray-white .list-item:nth-child(odd) {
    background-color: var(--color-footer-gray);
}

.list-container.gray-white .list-item:nth-child(even) {
    background-color: var(--color-primary-white);
}

.list-container.white-gray .list-item:nth-child(odd) {
    background-color: var(--color-primary-white);
}

.list-container.white-gray .list-item:nth-child(even) {
    background-color: var(--color-footer-gray);
}


.list-container .list-item-wrapper .list-item-number{
    text-align: center;
    align-self: flex-start;
}
.list-container .list-item-wrapper .list-item-number > span {
    font-size: 19.5rem;
    font-weight: 400;
    color: var(--color-brand-blue);
    line-height: 0.5;
}

.list-container  .list-item:nth-child(n + 10) .list-item-number > span{
    font-size: 12.5rem;
}

.list-container .list-item-wrapper .list-item-copy h3 {
    font-size: 3.5rem;
    line-height: 1.17;
    font-weight: 600;
}

.list-container .list-item-copy.column-2  .list-item-copy-text{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
}

.list-container .component-basic-copy {
    margin-top: 1rem;
    padding-inline: 0;
}

.list-container .list-item-wrapper .list-item-copy a.list-arrow-link {
    font-size: 2.4rem;
    font-weight: 700;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    column-gap: 1rem;
    color: var(--color-brand-blue);
    margin-top: 2rem;
}

@media screen and (max-width: 70em){
    .list-container .list-item{
        padding-inline: var(--mobile-inline-padding);
    }
}

@media screen and (max-width: 55em) {
    .list-container .list-item {
        padding-inline: var(--mobile-inline-padding);
    }
}

@media screen and (max-width: 40em) {
    .list-container .list-item-copy.column-2 .list-item-copy-text {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 35em) {
    .list-container .list-item-copy h3 {
        font-size: 2.8rem
    }
    .list-container .list-item-wrapper .list-item-number > span {
        font-size: 16rem;
    }
}

@media screen and (max-width: 25em) {
    .list-container.number-labels-on .list-item-wrapper {
        display: flex;
        flex-flow: column wrap;
    }

    .list-container .list-item-wrapper .list-item-number > span {
        font-size: 8rem;
    }
}
