/**
 * section-interface — весь рейс в кармане (Водителям).
 * Слева макет приложения (картинка), справа текст и список преимуществ.
 */

.section-interface {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 5.625rem;
    width: 100%;
    max-width: 81.25rem;
    margin: 0 auto;
    padding: 0 0 var(--site-section-gap);
    box-sizing: border-box;
    height: fit-content;
}

.section-interface .interface {
    display: block;
    flex-shrink: 0;
    width: 24.375rem;
    max-width: 100%;
    height: auto;
    overflow: hidden;
    background: var(--site-surface);
    border-radius: 1.875rem;
    box-shadow: 0 0 0 0.1875rem var(--site-epd-icon);
}

.section-interface .interface-image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: top center;
    border-radius: 1.875rem;
}

.section-interface .section-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.875rem;
    width: 37.5rem;
    max-width: 100%;
    height: fit-content;
    flex-shrink: 1;
    min-width: 0;
}

.section-interface .tag {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.625rem;
    box-sizing: border-box;
    width: fit-content;
    height: fit-content;
    padding: 0.625rem 1.25rem;
    background: var(--site-badge-bg);
    border-radius: 3.125rem;
}

.section-interface .icon {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

.section-interface .description-6 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0;
    font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: normal;
    text-align: center;
    color: var(--site-accent);
}

.section-interface .heading-7 {
    width: 33.9375rem;
    max-width: 100%;
    margin: 0;
    font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.15;
    color: var(--site-text);
}

.section-interface .description-7 {
    align-self: stretch;
    margin: 0;
    font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: normal;
    color: var(--site-text-body);
}

.section-interface .button {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.8419rem;
    box-sizing: border-box;
    width: fit-content;
    max-width: 100%;
    height: 2.5rem;
    padding: 0 1.25rem;
    border: 0;
    background: var(--site-accent);
    border-radius: 0.625rem;
    box-shadow: inset 0 0 0 0.0844rem var(--site-accent);
    cursor: pointer;
}

.section-interface .listay-ekran-chtoby-posmotret-kak-eto-ustroeno {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0;
    font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    line-height: normal;
    text-align: center;
    color: var(--site-on-accent);
}

.section-interface .advantages-list {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    align-self: stretch;
    margin: 0;
    padding: 0;
    list-style: none;
    height: fit-content;
}

.section-interface .advantage,
.section-interface .advantage-2,
.section-interface .advantage-3,
.section-interface .advantage-4,
.section-interface .advantage-5,
.section-interface .advantage-6,
.section-interface .advantage-7,
.section-interface .advantage-8 {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 0.625rem;
    align-self: stretch;
    height: fit-content;
    border-radius: 0.5rem;
}

.section-interface .icon-2,
.section-interface .icon-3,
.section-interface .icon-4,
.section-interface .icon-5,
.section-interface .icon-6,
.section-interface .icon-7,
.section-interface .icon-8,
.section-interface .icon-9 {
    display: flex;
    flex-shrink: 0;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    width: 1.125rem;
    height: 1.125rem;
    background: var(--site-success);
    border-radius: 50%;
}

.section-interface .check-2,
.section-interface .check-3,
.section-interface .check-4,
.section-interface .check-5,
.section-interface .check-6,
.section-interface .check-7,
.section-interface .check-8,
.section-interface .check-9 {
    display: block;
    width: 0.5rem;
    height: 0.3125rem;
}

.section-interface .description-8,
.section-interface .description-9,
.section-interface .description-10,
.section-interface .description-11,
.section-interface .description-12,
.section-interface .description-13,
.section-interface .description-14,
.section-interface .description-15 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    line-height: normal;
    color: var(--site-text);
}

/* Tablet: колонка, контент сверху */
@media (max-width: 63.9375rem) {
    .section-interface {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 3.75rem;
    }

    .section-interface .section-content {
        width: 100%;
        max-width: 37.5rem;
        order: -1;
    }

    .section-interface .heading-7 {
        width: auto;
    }
}

/* Phone */
@media (max-width: 47.9375rem) {
    .section-interface {
        gap: 1.875rem;
    }

    .section-interface .interface {
        width: 20.9375rem;
        border-radius: 1.5813rem;
        box-shadow: 0 0 0 0.1581rem var(--site-epd-icon);
    }

    .section-interface .interface-image {
        border-radius: 1.5813rem;
    }

    .section-interface .icon {
        width: 0.875rem;
        height: 0.875rem;
    }

    .section-interface .description-6 {
        font-size: 0.875rem;
    }

    .section-interface .heading-7 {
        font-size: 1.875rem;
    }

    .section-interface .description-7 {
        font-size: 0.875rem;
    }

    .section-interface .button {
        align-self: stretch;
        width: 100%;
        height: 3.625rem;
    }

    .section-interface .listay-ekran-chtoby-posmotret-kak-eto-ustroeno {
        flex: 1 1 0;
    }

    .section-interface .description-8,
    .section-interface .description-9,
    .section-interface .description-10,
    .section-interface .description-11,
    .section-interface .description-12,
    .section-interface .description-13,
    .section-interface .description-14,
    .section-interface .description-15 {
        font-size: 0.875rem;
    }
}