/* =================================================================== HOME LIVE section css =================================================================== */
.home-live {
    padding-block: 0;

    & .home-live__panel {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
        align-items: center;
        gap: var(--sp60);
        padding: var(--sp60);
        background: var(--blue-50);
        border-radius: var(--r-md);
        overflow: hidden;

        &::after {
            position: absolute; right: -80px; top: -80px;
            width: 280px; height: 280px;
            border: 40px solid var(--blue-100);
            border-radius: var(--r-full);
            content: "";
        }
    }

    & .home-live__copy {
        position: relative; z-index: 1;
        display: flex; flex-direction: column; align-items: flex-start;
        gap: var(--sp20);
    }

    & .home-live__title { font-size: var(--f40); & span { color: var(--primary); } }

    & .home-live__meta {
        display: flex; flex-wrap: wrap;
        gap: var(--sp15) var(--sp40);
        margin-block: var(--sp10);

        & dt { font-size: var(--f13); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
        & dd { font-size: var(--f16); font-weight: 600; color: var(--ink); }
    }

    & .home-live__hosts {
        position: relative; z-index: 1;
        display: grid;
        gap: var(--sp20);

        & .person {
            padding: var(--sp20);
            background: var(--white);
            border-radius: var(--r-md);
            box-shadow: var(--shadow-sm);
        }
        & .person__name { font-size: var(--f18); }
        & .person__role { font-size: var(--f13); }
        & .person__photo { width: 72px; height: 72px; }
    }
}

/* =================================================================== RESPONSIVE =================================================================== */
@media (max-width: 991.98px) {
    .home-live {
        & .home-live__panel { grid-template-columns: 1fr; padding: var(--sp40); }
    }
}

@media (max-width: 575.98px) {
    .home-live {
        & .home-live__panel { padding: var(--sp30) var(--sp20); }
        & .home-live__hosts .person { align-items: flex-start; }
    }
}