/*
|--------------------------------------------------------------------------
| Driving Forward
|--------------------------------------------------------------------------
*/

.driving-forward {
    position: relative;

    background: #222;

    color: var(--color-white);
}


.driving-forward__inner {
    display: grid;

    grid-template-columns:
        minmax(0, .95fr)
        minmax(0, 1fr);

    gap: 100px;

    padding-top: 72px;
    padding-bottom: 100px;
}


/*
|--------------------------------------------------------------------------
| Title
|--------------------------------------------------------------------------
*/

.driving-forward__title {
    max-width: 620px;

    margin: 0;

    font-family: var(--font-title);

    font-size: var(--font-size-h2);

    font-weight: 400;

    line-height: 1.1;

    letter-spacing: -.02em;

    color: var(--color-white);
}


/*
|--------------------------------------------------------------------------
| Right Content
|--------------------------------------------------------------------------
*/

.driving-forward__content {
    min-width: 0;
}


.driving-forward__lead {
    max-width: 850px;

    margin:
        0
        0
        20px;

    font-family: var(--font-primary);

    font-size: var(--font-size-text-main);
    font-weight: 300;

    line-height: 1.55;

    color: rgba(255, 255, 255, .72);
}


/*
|--------------------------------------------------------------------------
| Items
|--------------------------------------------------------------------------
*/

.driving-forward__items {
    width: 100%;
}


.driving-forward__item {
    position: relative;

    display: grid;

    grid-template-columns:
        66px
        minmax(0, 1fr);

    align-items: center;

    min-height: 80px;

    cursor: pointer;

    outline: none;
}


/*
|--------------------------------------------------------------------------
| Number
|--------------------------------------------------------------------------
*/

.driving-forward__number {
    font-family: var(--font-title);

    font-size: 36px;
    font-weight: 400;

    line-height: 1;

    color: rgba(197, 173, 134, .48);

    transition:
        color .3s ease;
}


/*
|--------------------------------------------------------------------------
| Label
|--------------------------------------------------------------------------
*/

.driving-forward__label {
    font-family: var(--font-primary);

    font-size: var(--font-size-text-large);
    font-weight: 300;

    line-height: 1.35;

    color: rgba(255, 255, 255, .82);

    transition:
        color .3s ease;
}


/*
|--------------------------------------------------------------------------
| Animated Hover Line
|--------------------------------------------------------------------------
*/

.driving-forward__item::after {
    content: "";

    position: absolute;

    left: 66px;
    right: 0;
    bottom: 0;

    height: 1px;

    background: var(--color-gold);

    transform: scaleX(0);

    transform-origin: left center;

    transition:
        transform .45s
        cubic-bezier(.76, 0, .24, 1);
}


/*
|--------------------------------------------------------------------------
| Hover
|--------------------------------------------------------------------------
*/

.driving-forward__item:hover::after,
.driving-forward__item:focus-visible::after {
    transform: scaleX(1);
}


.driving-forward__item:hover
.driving-forward__number,
.driving-forward__item:focus-visible
.driving-forward__number {
    color: var(--color-gold);
}


.driving-forward__item:hover
.driving-forward__label,
.driving-forward__item:focus-visible
.driving-forward__label {
    color: #fff;
}


/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 1199px) {

    .driving-forward__inner {
        gap: 65px;
    }


    .driving-forward__lead {
        font-size: 19px;
    }


    .driving-forward__label {
        font-size: 18px;
    }

}


/*
|--------------------------------------------------------------------------
| Tablet / Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 991px) {

    .driving-forward__inner {
        grid-template-columns: 1fr;

        gap: 45px;

        padding-top: 65px;
        padding-bottom: 75px;
    }


    .driving-forward__title {
        max-width: 700px;
    }


    .driving-forward__content {
        max-width: 100%;
    }

}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 767px) {

    .driving-forward__inner {
        gap: 35px;

        padding-top: 50px;
        padding-bottom: 55px;
    }


    .driving-forward__title {
        font-size: 40px;
    }


    .driving-forward__lead {
        margin-bottom: 18px;

        font-size: 17px;
    }


    .driving-forward__item {
        grid-template-columns:
            52px
            minmax(0, 1fr);

        min-height: 72px;
    }


    .driving-forward__number {
        font-size: 30px;
    }


    .driving-forward__label {
        font-size: 20px;
    }


    .driving-forward__item::after {
        left: 52px;
    }

}