/*---HOME HIGHLIGHT---*/
.home-page .highlight .content {
    padding: 84px 20px 120px;
}

.home-page .highlight .highlight-position--top-left .content,
.home-page .highlight .highlight-position--center-left .content,
.home-page .highlight .highlight-position--bottom-left .content,
.home-page .highlight .highlight-position--top-center .content,
.home-page .highlight .highlight-position--center-center .content,
.home-page .highlight .highlight-position--bottom-center .content,
.home-page .highlight .highlight-position--top-right .content,
.home-page .highlight .highlight-position--center-right .content,
.home-page .highlight .highlight-position--bottom-right .content {
    align-items: center;
    justify-content: center;
    text-align: center;
}

.home-page .home-video--frames {
    --video-visible: 2;
}

@media (max-width: 768px) {
    .home-page .home-video--frames {
        --video-visible: 1;
    }
}

.home-page .home-video--frames .video-slide {
    grid-template-columns: none;
}

.home-page .highlight .title {
    font-size: clamp(42px, 11vw, 50px);
}

.home-page .highlight .excerpt {
    font-size: clamp(18px, 4.6vw, 20px);
}

.home-page .highlight {
    aspect-ratio: auto;
    height: 78dvh;
    min-height: 520px;
}

.home-page .highlight .search {
    width: min(560px, calc(100% - 32px));
    height: 52px;
}

.home-page .highlight .search button {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
}

/*---HOME MEDIA CONTENT---*/
.home-page .home-video,
.home-page .home-articles {
    padding: 64px 16px 40px;
}

.home-page .highlight + .home-video,
.home-page .highlight + .home-articles {
    margin-top: -15px;
}

.home-page .highlight + .home-interactive,
.home-page .highlight + .home-listening,
.home-page .highlight + .home-activities {
    margin-top: -28px;
}

.home-page .activity-inner {
    padding: 32px 16px;
}

.home-page .activity-title {
    font-size: 30px;
}

.home-page .highlight + .home-video,
.home-page .highlight + .home-articles {
    padding-top: 64px;
}

.home-page .home-video:has(+ .home-articles),
.home-page .home-articles:has(+ .home-video) {
    padding-bottom: 16px;
}

.home-page .home-video + .home-articles,
.home-page .home-articles + .home-video {
    padding-top: 24px;
}

.home-page .home-video .video-feature,
.home-page .home-video .video-slide {
    grid-template-columns: 1fr;
}

.home-page .home-video .video-toolbar {
    flex-wrap: wrap;
}

/*---HOME INTERACTIVE---*/
.home-page .home-interactive .interactive-panel {
    grid-template-columns: 1fr;
    padding: 48px 16px;
}

.home-page .home-interactive .interactive-question,
.home-page .home-interactive .interactive-empty {
    font-size: 24px;
}

.home-page .home-interactive .choice-row {
    grid-template-columns: 1fr;
}

.home-page .listening .listening-wrap {
    padding: 40px 16px;
}

.home-page .listening .listening-layout {
    grid-template-columns: 1fr;
}

.home-page .home-articles .article-grid {
    grid-template-columns: 1fr;
}

.home-page .home-articles .article-item {
    min-height: 0;
}

.home-page .home-articles .article-title {
    font-size: 20px;
    font-weight: 400;
}

.home-page .shorts-modal-close {
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
}

.home-page .highlight .highlight-dots {
    right: 16px;
    bottom: 88px;
}

.home-page .home-shorts {
    padding: 64px 16px 40px;
}

.home-page .shorts-card {
    flex-basis: calc((100% - 32px) / 3);
}

@media (max-width: 768px) {
    .home-page .shorts-card {
        flex-basis: calc((100% - 16px) / 2);
    }
}

@media (max-width: 390px) {
    .home-page .shorts-card {
        flex-basis: 100%;
    }

    .home-page .shorts-modal {
        padding: 12px;
    }
}

.home-page .shorts-modal-stage {
    flex-direction: column;
    align-items: center;
    width: min(100%, 420px);
    overflow: auto;
}

.home-page .shorts-modal-player {
    width: min(100%, calc((100dvh - 180px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 9 / 16));
    height: auto;
    max-height: calc(100dvh - 180px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}

.home-page .shorts-modal-detail {
    flex: 0 1 auto;
    width: 100%;
    max-width: none;
    max-height: 180px;
}