.why-dispatchers {
    max-width: calc(1344px + var(--tracking-edge) * 2);
    padding-inline: var(--tracking-edge);
    margin-inline: auto;
}

.why-dispatchers__head {
    gap: 24px;
    margin-bottom: 40px;
}

.why-dispatchers__subtitle {
    max-width: 415px;
}

.why-dispatchers__break--mobile {
    display: none;
}

.why-dispatchers .feature-tabs {
    height: 464px;
}

.why-dispatchers__panel {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.why-dispatchers__panel--route-history,
.why-dispatchers__panel--hos-visibility,
.why-dispatchers__panel--alerts {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.why-dispatchers__panel--route-history .feature-tabs__panel-content {
    margin-top: 0;
    margin-left: auto;
    margin-right: -28px;
    flex-shrink: 0;
}

.why-dispatchers__image--route-history {
    width: 438px;
    max-width: none;
    flex-shrink: 0;
}

.why-dispatchers__panel--hos-visibility .feature-tabs__panel-content {
    margin-top: 0;
    margin-left: auto;
    margin-right: -48px;
    flex-shrink: 0;
}

.why-dispatchers__image--duty-status {
    height: 100%;
    width: auto;
    max-width: none;
    flex-shrink: 0;
}

.why-dispatchers__image--hos-rings {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 23.5%;
    width: auto;
    transform: translateX(-40%);
}

.why-dispatchers__panel--alerts .feature-tabs__panel-content {
    margin-top: 0;
    margin-left: auto;
    margin-right: -30px;
    flex-shrink: 0;
}

.why-dispatchers__image--alert {
    height: 100%;
    width: auto;
    max-width: none;
    flex-shrink: 0;
}

.why-dispatchers__panel-content {
    margin-top: auto;
    height: auto;
    display: flex;
    align-items: flex-end;
}

.why-dispatchers__panel-content picture {
    display: contents;
}

.why-dispatchers__panel--route-history .feature-tabs__panel-content,
.why-dispatchers__panel--hos-visibility .feature-tabs__panel-content,
.why-dispatchers__panel--alerts .feature-tabs__panel-content {
    height: 100%;
    align-self: flex-end;
}

.why-dispatchers__image--track-link {
    width: 95.5%;
}

.why-dispatchers__image--active-links {
    max-width: 307px;
    width: 100%;

    position: absolute;
    top: 0;
    right: 0;
    transform: translate(25px, -31%);
}

@media (max-width: 900px) {
    .why-dispatchers {
        padding-inline: 48px;
    }

    .why-dispatchers__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;

        margin-bottom: 40px;
    }

    .why-dispatchers__title.tracking-section__title {
        font-size: 56px;
        line-height: 114%;
        letter-spacing: -0.56px;
    }

    .why-dispatchers__subtitle {
        max-width: 449px;
    }

    .why-dispatchers .feature-tabs {
        flex-direction: column;
        gap: 40px;

        height: auto;
    }

    .why-dispatchers .feature-tabs__list {
        flex-direction: row;
        gap: 16px;

        width: auto;
        max-width: none;
        margin-right: -48px;
        padding-right: 48px;

        overflow-x: auto;
        scrollbar-width: none;
    }

    .why-dispatchers .feature-tabs__list::-webkit-scrollbar {
        display: none;
    }

    .why-dispatchers .feature-tabs__item {
        flex: 0 0 368px;
        width: 368px;
    }

    .why-dispatchers .feature-tabs__panels {
        height: auto;
        padding: 32px 32px 48px;
    }

    .why-dispatchers__panel--route-history,
    .why-dispatchers__panel--hos-visibility,
    .why-dispatchers__panel--alerts {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }

    .why-dispatchers__panel-content,
    .why-dispatchers__panel--route-history .feature-tabs__panel-content,
    .why-dispatchers__panel--hos-visibility .feature-tabs__panel-content,
    .why-dispatchers__panel--alerts .feature-tabs__panel-content {
        margin: 55px 0 0;
    }

    [data-feature-panel="tracking-links"] .why-dispatchers__panel-content,
    [data-feature-panel="reefer-sensor"] .why-dispatchers__panel-content {
        width: 100%;
        height: auto;
        margin: 55px 0 -48px;
    }

    .why-dispatchers__panel--route-history .feature-tabs__panel-content,
    .why-dispatchers__panel--hos-visibility .feature-tabs__panel-content,
    .why-dispatchers__panel--alerts .feature-tabs__panel-content {
        width: auto;
        height: auto;
        margin: 32px auto -48px;
    }

    .why-dispatchers__image--route-history,
    .why-dispatchers__image--duty-status,
    .why-dispatchers__image--alert {
        width: 460px;
        max-width: 100%;
        height: auto;
    }

    .why-dispatchers__image--track-link {
        width: 97.7%;
    }

    .why-dispatchers__image--active-links {
        max-width: 229px;
        transform: translate(18px, -46.7%);
    }
}

@media (max-width: 640px) {
    .why-dispatchers {
        padding-inline: 16px;
    }

    .why-dispatchers__title.tracking-section__title {
        font-size: 32px;
        line-height: 118%;
        letter-spacing: -0.16px;
    }

    .why-dispatchers__head {
        margin-bottom: 32px;
    }

    .why-dispatchers__break--mobile {
        display: inline;
    }

    .why-dispatchers__break--desktop {
        display: none;
    }

    .why-dispatchers__subtitle {
        max-width: none;
    }

    .why-dispatchers .feature-tabs {
        gap: 24px;
    }

    .why-dispatchers .feature-tabs__list {
        margin-right: -16px;
        padding-right: 16px;
    }

    .why-dispatchers .feature-tabs__item {
        flex: 0 0 auto;
        gap: 20px;

        width: auto;
        height: 76px;
        max-width: none;
    }

    .why-dispatchers .feature-tabs__item-icon {
        width: 32px;
        height: 32px;
    }

    .why-dispatchers .feature-tabs__item-icon svg {
        width: 16px;
        height: 16px;
    }

    .why-dispatchers .feature-tabs__item-label {
        font-size: 14px;
        font-weight: 500;
        line-height: 143%;
        white-space: nowrap;
    }

    .why-dispatchers .feature-tabs__item-arrow {
        margin-left: 4px;
    }

    .why-dispatchers .feature-tabs__panels {
        padding: 24px;
    }

    .why-dispatchers .feature-tabs__panel-title {
        margin-bottom: 12px;

        font-size: 28px;
        line-height: 125%;
        letter-spacing: -0.056px;
    }

    .why-dispatchers .feature-tabs__panel-desc {
        max-width: none;
        font-size: 14px;
    }

    .why-dispatchers__panel-content,
    .why-dispatchers__panel--route-history .feature-tabs__panel-content,
    .why-dispatchers__panel--hos-visibility .feature-tabs__panel-content,
    .why-dispatchers__panel--alerts .feature-tabs__panel-content {
        height: auto;
        margin-top: 19px;
    }

    [data-feature-panel="tracking-links"] .why-dispatchers__panel-content,
    [data-feature-panel="reefer-sensor"] .why-dispatchers__panel-content {
        margin: 19px 0 -24px;
    }

    .why-dispatchers__panel--route-history .feature-tabs__panel-content,
    .why-dispatchers__panel--hos-visibility .feature-tabs__panel-content,
    .why-dispatchers__panel--alerts .feature-tabs__panel-content {
        max-width: 100%;
        margin: 19px auto -24px;
    }

    .why-dispatchers__image--track-link {
        flex: 0 0 auto;

        width: calc(100% + 10px);
        max-width: none;
        margin-left: 14px;
    }

    .why-dispatchers__image--active-links {
        top: auto;
        right: auto;
        bottom: 10.8%;
        left: -10px;

        width: 275px;
        max-width: none;

        transform: none;
    }
}