/* Responsive rules moved from ../components.css. Keep this file loaded immediately after components.css. */

@media (max-width: 767.98px) {
    .footer-content {
        grid-template-columns: 1fr;
        gap: 1.65rem;
        padding: 1.7rem 1rem 1.8rem;
        text-align: center;
    }

    .footer-section,
    .footer-contact {
        gap: 1rem;
        justify-items: center;
        justify-self: center;
    }

    .footer-rule {
        width: min(100%, 560px);
        height: 1px;
        min-height: 0;
        margin-block: 0.15rem;
        background: linear-gradient(90deg, transparent, rgba(var(--fr-dark-rgb), 0.18), transparent);
    }

    .footer-section-title {
        font-size: 0.68rem;
    }

    .exchange-links-list {
        justify-content: center;
        gap: 0.75rem 1rem;
    }

    .footer-exchange-link {
        font-size: 0.82rem;
    }

    .hotline-content {
        display: grid;
        justify-content: center;
        justify-items: center;
        gap: .62rem;
        font-size: .86rem;
        line-height: 1.45;
        text-align: center;
    }

    .hotline-content i {
        font-size: .85rem;
    }

    .hotline-contact-list {
        gap: .52rem;
        justify-items: start;
        text-align: left;
    }

    .hotline-label,
    .hotline-phone,
    .hotline-contact-list,
    .hotline-email {
        max-width: 100%;
    }
}

@media (max-width: 576px) {
    .main-content {
        --site-page-bottom-space: 2rem;
    }

    .main-content > .pb-5:last-child,
    .main-content > section.pb-5:last-child,
    .main-content > div.pb-5:last-child {
        padding-bottom: var(--site-page-bottom-space) !important;
    }

    .main-content .page-title-wrapper {
        padding-bottom: 28px;
    }

    .main-content .page-title-wrapper .page-title,
    .main-content .brand-page-title,
    .main-content .detail-post-title,
    .main-content .label-meeting-title,
    .main-content .comingsoon-title {
        padding-bottom: .95rem;
    }

    .main-content .page-title-wrapper .page-title::after,
    .main-content .brand-page-title::after,
    .main-content .detail-post-title::after,
    .main-content .label-meeting-title::after,
    .main-content .comingsoon-title::after {
        width: 142px;
    }

    .social-follow-header {
        flex-direction: column;
        align-items: center !important;
        gap: 0.5rem;
        justify-content: center !important;
        margin-top: 5px;
    }

    .social-follow-section .icon-col {
        margin-top: 5px;
        margin-left: 0;
    }

    .social-follow-buttons {
        flex-wrap: wrap;
        gap: 0.5rem;
        justify-content: center;
    }
}