/**
 * Главная: фон страницы + специфика hero--home (полоска, laptop/phone).
 */

.home {
    background-color: var(--site-surface);
    color: var(--site-text-primary);
}

body.home.site-page {
    background-color: var(--site-surface);
}

.hero--home .hero__media::after {
    content: '';
    display: block;
    width: 2.5rem;
    height: 0.1875rem;
    margin: 1rem auto 0;
    border-radius: 624.9375rem;
    background-color: var(--site-accent);
}

/* Mobile: ноут + телефон ниже/справа, как в макете */
.hero--home .hero__device--primary {
    width: 88%;
    max-width: 24rem;
}

.hero--home .hero__device--secondary {
    right: 0;
    bottom: 0;
    width: 34%;
    max-width: 8.25rem;
}

@media (min-width: 48rem) {
    .hero--home .hero__device--primary {
        width: 78%;
        max-width: 28rem;
    }

    .hero--home .hero__device--secondary {
        right: 8%;
        bottom: 1.75rem;
        width: 28%;
        max-width: 9rem;
    }
}

@media (min-width: 64rem) {
    .hero--home {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    }

    .hero--home .hero__media::after {
        display: none;
    }

    .hero--home .hero__device--primary {
        width: 92%;
        max-width: none;
    }

    .hero--home .hero__device--secondary {
        right: 0;
        bottom: 0.5rem;
        width: 32%;
        max-width: 11.5rem;
    }

    .hero--home .hero__title {
        max-width: 32rem;
    }
}