/* ==================== [ 1500px ] ==================== */
@media (min-width: 1500px) {

    /* ==================== [ Common Start ] ==================== */
    .container ,
    .container-fluid {
        max-width: calc(var(--container) + (var(--container-padding) * 2));
    }
    /* ==================== [ Common End ] ==================== */
}

/* ==================== [ 1399px ] ==================== */
@media (max-width: 1399px) {}

/* ==================== [ 1199px ] ==================== */
@media (max-width: 1199px) {}

/* ==================== [ 991px ] ==================== */
@media (max-width: 991px) {
    :root {
        /* Heading Sizes */
        --fs-h1: 36px;
        --fs-h2: 32px;
        --fs-h3: 28px;
        --fs-h4: 24px;
        --fs-h5: 22px;
        --fs-h6: 18px;
    }

    /* real-stories page */
    .real-stories-section .stories-header-part .sidebar-filter-button .selected-filter-items { display: none; }
    .real-stories-section .stories-artist-list.grid-layout-view .stories-artist-block { flex-direction: column; }
    /* real-stories page */

    .submission-form-v2 .submission-form-title * { margin-bottom: 20px; }
}

/* ==================== [ 767px ] ==================== */
@media (max-width: 767px) {
    :root {
        /* Heading Sizes */
        --fs-h1: 30px;
        --fs-h2: 28px;
        --fs-h3: 26px;
        --fs-h4: 22px;
        --fs-h5: 20px;
        --fs-h6: 18px;
    }

body { padding-top: 63px; }
.breadcrumb-section { padding: 10px 20px; }
/* header */
.header .container { padding-inline: 20px; }
/* header */

/* add-story page */
.step-wizard { padding-top: 30px; padding-bottom: 42px; }
.step-wizard .step-wizard-content { padding: 0; }
.step-wizard-form .steps-button-area { margin-top: 30px; }
/* add-story page */

/* real-stories page */
.real-stories-section .stories-header-part { align-items: flex-start; gap: 7px; padding: 10px 12px; }
.real-stories-section .stories-header-part .filter-result-layout { justify-content: center; }
.real-stories-section .stories-body-part .stories-main-content { padding: 20px 12px; }
.real-stories-section .stories-artist-list.grid-layout-view > * { width: 100%; }
.real-stories-section:has(.stories-sidebar-part.close-sidebar) .stories-artist-list.grid-layout-view > * { width: 50%; }
/* real-stories page */

/* story-detail page */
.story-detail-section .story-author-block .auther-detail .title * { font-size: 22px; }
.story-detail-section .story-author-block .auther-profile { width: 60px; height: 60px; }
.story-detail-section .story-author-block { gap: 20px; }
.story-detail-section .story-detail-list .story-block { padding: 16px; }
/* story-detail page */

    .step-wizard-form .give-permission-selection .form-check-label span { font-size: 14px; }
    .common-form .form-group { margin-bottom: 20px; }
}

/* ==================== [ 575px ] ==================== */
@media (max-width: 575px) {
/* header */
.header .nav-parent-block { padding-top: 20px; }
/* header */

/* step-wizard */
.step-wizard-form .steps-button-area { flex-direction: column-reverse; justify-content: center; }
/* step-wizard */

/* real-stories page */
.real-stories-section .stories-header-part { padding: 10px 12px; flex-direction: column-reverse; }
.real-stories-section .stories-header-part .filter-result-layout { min-width: 100%; gap: 7px; }
.real-stories-section .stories-header-part .filter-result-layout .form-select { max-width: 130px; font-size: 14px; padding-left: 10px; padding-right: 10px; }
.real-stories-section .stories-body-part .stories-sidebar-part { position: absolute; left: 0; z-index: 9; margin: 0 !important; width: 100%; border-top:1px solid rgba(0,0,0,0.15); border-bottom: 1px solid rgba(0,0,0,0.15); }
.real-stories-section .stories-body-part .stories-sidebar-part .stories-accordion { display: block; width: 100%; flex-direction: column; max-height: 350px; overflow-y: scroll; }
.real-stories-section .stories-body-part .stories-sidebar-part .stories-accordion .accordion-item { margin-bottom: 15px; }
.real-stories-section .stories-body-part .stories-sidebar-part.close-sidebar { left: -100%; }
.real-stories-section .stories-body-part .stories-sidebar-part .sidebar-filter-buttons { padding-top: 15px; border-top: 1px solid rgba(0,0,0,0.15); }
.real-stories-section:has(.stories-sidebar-part.close-sidebar) .stories-artist-list.grid-layout-view > * { width: 100%; }
/* real-stories page */

.submit-btn-wrapper .btn { width: 100%; max-width: 100%; }
}   



/* Global Responsive */
@media (max-width: 1399px) {
    :root {
        --title-display: 120px;
        --display-image-width: 180px;

        --title-48: 40px;
        --title-50: 40px;
        --title-56: 40px;
        --title-60: 50px;
        --title-42: 36px;

        --text-18: 16px;
        --text-20: 18px;

        --space-24: 20px;
        --space-32: 28px;
        --space-40: 36px;
        --space-48: 44px;
        --space-56: 52px;
        --space-64: 60px;
        --space-72: 64px;
        --space-80: 72px;
    }
}

@media (max-width: 1199px) {
    :root {
        --space-16: 14px;
        --space-24: 18px;
        --space-32: 24px;
        --space-40: 32px;
        --space-48: 40px;
        --space-56: 48px;
        --space-64: 56px;
        --space-72: 60px;
        --space-80: 64px;

        --title-28: 26px;
        --title-30: 28px;
        --title-32: 28px;

        --quote-38: 32px;
        --quote-line-height: 1.2;

        /* Section Spacing */
        --section-space-80: 60px;
        --section-space-128: 80px;
    }
}

@media (max-width: 991px) {
    :root {
        --title-display: 80px;
        --display-image-width: 150px;
        --line-height-display: .9;

        --title-20: 18px;
        --title-28: 24px;
        --title-30: 26px;
        --title-32: 24px;
        --title-36: 32px;
        --title-42: 32px;
        --title-48: 32px;
        --title-50: 32px;
        --title-56: 32px;
        --title-60: 32px;

        --quote-38: 28px;
        
        --space-12: 10px;
        --space-16: 12px;
        --space-24: 16px;
        --space-32: 20px;
        --space-40: 28px;
        --space-48: 32px;
        --space-56: 40px;
        --space-64: 48px;
        --space-72: 56px;
        --space-80: 60px;

        /* Section Spacing */
        --section-space-80: 50px;
        --section-space-128: 70px;
    }
}

@media (max-width: 767px) {
    :root {
        --title-display: 70px;
        --display-image-width: 120px;
        --line-height-display: 1;

        --title-28: 22px;
        --title-30: 24px;
        --title-32: 20px;
        --title-36: 28px;
        --title-42: 32px;
        --quote-38: 28px;

        --space-8: 6px;
        --space-12: 8px;
        --space-16: 10px;
        --space-24: 14px;
        --space-32: 18px;
        --space-40: 24px;
        --space-48: 28px;
        --space-56: 32px;
        --space-64: 40px;
        --space-72: 40px;
        --space-80: 48px;

        --quote-38: 24px;

        /* Section Spacing */
        --section-space-80: 40px;
        --section-space-128: 60px;
    }
}

@media (max-width: 575px) {
    :root {
        --button-fs-16: 14px;
        --prism-body-padding-top: 87px;

        --title-display: 34px;
        --display-image-width: 60px;

        --title-20: 16px;
        --title-28: 21px;
        --title-32: 18px;
        --title-36: 24px;
        --title-42: 24px;
        --title-48: 24px;
        --title-50: 24px;
        --title-56: 24px;
        --title-60: 24px;

        --text-16: 15px;
        --text-18: 15px;
        --text-20: 16px;

        --quote-38: 20px;

        --space-8: 4px;
        --space-12: 6px;
        --space-16: 8px;
        --space-24: 12px;
        --space-32: 16px;
        --space-40: 20px;
        --space-48: 24px;
        --space-56: 28px;
        --space-64: 32px;
        --space-72: 32px;
        --space-80: 40px;

        /* Section Spacing */
        --section-space-80: 30px;
        --section-space-128: 40px;
    }
}