:root {
    /* رنگ‌ها */
    --brown: #b9a879;
    --blue: #243774;
    --red: #ed1b2f;
    --yellow: #fcaf17;
    --light-blue: #bac0d8;
    --dark-green: #232f29;
    --light-brown: #d1c7ae;
    --dark-brown: #85765c;

    --black: #000000;
    --dark-1: #111111;
    --dark-2: #141414;
    --dark-3: #1e1e1e;
    --dark-4: #323232;
    --gray-1: #444444;
    --gray-2: #606060;
    --gray-3: #666666;
    --gray-4: #939393;
    --gray-5: #a0a0a0;
    --light-1: #cccccc;
    --light-2: #d5d5d5;
    --light-3: #f2f2f2;
    --white: #ffffff;


    /* فاصله‌ها */
    --margin-row-in-container: 0 -36px;
    --margin-row-in-section: 0 -12px;
    --padding-col-in-container: 0  36px;
    --padding-col-in-section: 0 12px;
    --padding-top-row: 32px;
    --padding-bottom-row: 32px;
    --padding-bottom-row-header: 18px;
    --margin-left-section-header-icon: 10px;

    --padding-bottom-row-sidebar:24px;
    --padding-bottom-section-sidebar:24px;

    --margin-botom-card-in-section: 24px;


    --padding-main-menu-item: 16px 4px;
    
    --padding-8: 8px;
    --padding-18: 18px;
    --padding-24: 24px;
    --margin-18: 18px;
    --margin-24: 24px;




    /*عرض ستون‌ها*/
    --dist-1: calc(100% / 30 * 1);
    --dist-2: calc(100% / 30 * 2);
    --dist-3: calc(100% / 30 * 3);
    --dist-4: calc(100% / 30 * 4);
    --dist-5: calc(100% / 30 * 5);
    --dist-6: calc(100% / 30 * 6);
    --dist-7: calc(100% / 30 * 7);
    --dist-8: calc(100% / 30 * 8);
    --dist-9: calc(100% / 30 * 9);
    --dist-10: calc(100% / 30 * 10);
    --dist-11: calc(100% / 30 * 11);
    --dist-12: calc(100% / 30 * 12);
    --dist-13: calc(100% / 30 * 13);
    --dist-14: calc(100% / 30 * 14);
    --dist-15: calc(100% / 30 * 15);
    --dist-16: calc(100% / 30 * 16);
    --dist-17: calc(100% / 30 * 17);
    --dist-18: calc(100% / 30 * 18);
    --dist-19: calc(100% / 30 * 19);
    --dist-20: calc(100% / 30 * 20);
    --dist-21: calc(100% / 30 * 21);
    --dist-22: calc(100% / 30 * 22);
    --dist-23: calc(100% / 30 * 23);
    --dist-24: calc(100% / 30 * 24);
    --dist-25: calc(100% / 30 * 25);
    --dist-26: calc(100% / 30 * 26);
    --dist-27: calc(100% / 30 * 27);
    --dist-28: calc(100% / 30 * 28);
    --dist-29: calc(100% / 30 * 29);
    --dist-30: calc(100% / 30 * 30);


    
    --dist-in-1: calc(100% / 12 * 1);
    --dist-in-2: calc(100% / 12 * 2);
    --dist-in-3: calc(100% / 12 * 3);
    --dist-in-4: calc(100% / 12 * 4);
    --dist-in-5: calc(100% / 12 * 5);
    --dist-in-6: calc(100% / 12 * 6);
    --dist-in-7: calc(100% / 12 * 7);
    --dist-in-8: calc(100% / 12 * 8);
    --dist-in-9: calc(100% / 12 * 9);
    --dist-in-10: calc(100% / 12 * 10);
    --dist-in-11: calc(100% / 12 * 11);
    --dist-in-12: calc(100% / 12 * 12);

    --container-width: 1080px;


    /* فونت‌ها */
    --font-body: normal 13px/25px 'Khamenei_ir WebLite';
    --font-input: normal 13px/25px 'Khamenei_ir WebLite';

    --font-feature-wizard-title: normal 40px/64px 'Khamenei_ir Bold';
    --font-feature-wizard-sup-title: normal 18px/21px 'Khamenei_ir WebLite';
    --font-feature-wizard-attachment-title: normal 13px/21px 'Khamenei_ir WebLite';
    --font-feature-wizard-attachment-items: normal 13px/21px 'Khamenei_ir WebLite';

    --font-feature-title: normal 38px/61px 'Khamenei_ir Bold';
    --font-feature-sup-title: normal 13px/21px 'Khamenei_ir WebLite';
    --font-feature-attachment-title: normal 13px/21px 'Khamenei_ir WebLite';
    --font-feature-attachment-items: normal 13px/22px 'Khamenei_ir WebLite';
    --font-feature-title-titr2: normal 30px/48px 'Khamenei_ir Bold';
    --font-feature-lead-titr2: normal 13px/22px 'Khamenei_ir WebLite';


    --font-section-title: normal 21px/26px 'Khamenei_ir WebLite';
    --font-section-icon: normal 21px/21px 'khamenei_ir icon';
    --font-section-title-side: normal 13px/21px 'Khamenei_ir Bold';
    
    --font-card-title-larg: normal 25px/40px 'Khamenei_ir Bold';
    --font-card-title-medium: normal 21px/34px 'Khamenei_ir Bold';
    --font-card-title-bold: normal 13px/21px 'Khamenei_ir bold';
    --font-card-title: normal 13px/21px 'Khamenei_ir WebLite';
    --font-card-sup-title: normal 13px/30px 'Khamenei_ir WebLite';
    --font-card-lead: normal 13px/25px 'Khamenei_ir WebLite';
    --font-card-text: normal 13px/25px 'Khamenei_ir WebLite';
    --font-card-author: normal 10px/20px 'Khamenei_ir WebLite';
    --font-card-time: normal 10px/20px 'Khamenei_ir WebLite';
    --font-card-time-normal: normal 13px/25px 'Khamenei_ir WebLite';
    --font-card-view-more: normal 10px/20px 'Khamenei_ir WebLite';
    --font-card-content-type: normal 10px/20px 'Khamenei_ir WebLite';
    --font-section-blockquote-icon: normal 44px/0px 'Khamenei_ir Bold';
    
    --font-morelink-interior-page: normal 10px/20px 'Khamenei_ir WebLite';

    --font-page-head-title: normal 30px/38px 'Khamenei_ir WebLite';
    --font-page-head-title-icon: normal 35px/44px 'khamenei_ir icon';

    --font-list-item: normal 13px/25px 'Khamenei_ir WebLite';

    --font-keyword-section: normal 11px/26px 'Khamenei_ir WebLite';
    
    --font-menu: normal 13px/25px 'Khamenei_ir WebLite';

    --font-footer: normal 13px/25px 'Khamenei_ir WebLite';

    --font-Neirizi: normal 21px/48px 'Neirizi';
}



.col-1{width:var(--dist-1)}
.col-2{width:var(--dist-2)}
.col-3{width:var(--dist-3)}
.col-4{width:var(--dist-4)}
.col-5{width:var(--dist-5)}
.col-6{width:var(--dist-6)}
.col-7{width:var(--dist-7)}
.col-8{width:var(--dist-8)}
.col-9{width:var(--dist-9)}
.col-10{width:var(--dist-10)}
.col-11{width:var(--dist-11)}
.col-12{width:var(--dist-12)}
.col-13{width:var(--dist-13)}
.col-14{width:var(--dist-14)}
.col-15{width:var(--dist-15)}
.col-16{width:var(--dist-16)}
.col-17{width:var(--dist-17)}
.col-18{width:var(--dist-18)}
.col-19{width:var(--dist-19)}
.col-20{width:var(--dist-20)}
.col-21{width:var(--dist-21)}
.col-22{width:var(--dist-22)}
.col-23{width:var(--dist-23)}
.col-24{width:var(--dist-24)}
.col-25{width:var(--dist-25)}
.col-26{width:var(--dist-26)}
.col-27{width:var(--dist-27)}
.col-28{width:var(--dist-28)}
.col-29{width:var(--dist-29)}
.col-30{width:var(--dist-30)}



.col-in-1{width:var(--dist-in-1)}
.col-in-2{width:var(--dist-in-2)}
.col-in-3{width:var(--dist-in-3)}
.col-in-4{width:var(--dist-in-4)}
.col-in-5{width:var(--dist-in-5)}
.col-in-6{width:var(--dist-in-6)}
.col-in-7{width:var(--dist-in-7)}
.col-in-8{width:var(--dist-in-8)}
.col-in-9{width:var(--dist-in-9)}
.col-in-10{width:var(--dist-in-10)}
.col-in-11{width:var(--dist-in-11)}
.col-in-12{width:var(--dist-in-12)}





.aspect-container{position: relative;overflow: hidden;width: 100%;}

.aspect-container[data-aspect="1:1"]{aspect-ratio:1/1;}
.aspect-container[data-aspect="2:1"]{aspect-ratio:2/1;}
.aspect-container[data-aspect="3:2"]{aspect-ratio:3/2;}
.aspect-container[data-aspect="3:4"]{aspect-ratio:3/4;}
.aspect-container[data-aspect="4:3"]{aspect-ratio:4/3;}
.aspect-container[data-aspect="5:2"]{aspect-ratio:5/2;}
.aspect-container[data-aspect="9:16"]{aspect-ratio:9/16;}
.aspect-container[data-aspect="16:9"]{aspect-ratio:16/9;}
.aspect-container[data-aspect="48:35"]{aspect-ratio:48/35;}
.aspect-container[data-aspect="540:223"]{aspect-ratio:540/223;}

.aspect-inside{display: flex;flex-wrap: wrap;width: 100%;height: 100%;}

@supports not (aspect-ratio: 1/1){
    .aspect-container{overflow: hidden;}
    .aspect-inside{position: absolute;top: 0;right: 0;}

    .aspect-container[data-aspect="1:1"]{padding-top: calc(1 / 1 * 100%);}
    .aspect-container[data-aspect="2:1"]{padding-top: calc(1 / 2 * 100%);}
    .aspect-container[data-aspect="3:2"]{padding-top:calc(2 / 3 * 100%);}
    .aspect-container[data-aspect="3:4"]{padding-top:calc(4 / 3 * 100%);}
    .aspect-container[data-aspect="4:3"]{padding-top:calc(3 / 4 * 100%);}
    .aspect-container[data-aspect="5:2"]{padding-top:calc(2 / 5 * 100%);}
    .aspect-container[data-aspect="9:16"]{padding-top:calc(16 / 9 * 100%);}
    .aspect-container[data-aspect="16:9"]{padding-top:calc(9 / 16 * 100%);}
    .aspect-container[data-aspect="48:35"]{padding-top:calc(35 / 48 * 100%);}
    .aspect-container[data-aspect="540:223"]{padding-top:calc(223 / 540 * 100%);}
}