/* === Container Query Grid System === */
.cq-row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -0.75rem;
    margin-right: -0.75rem;
    container-type: inline-size;
    container-name: cq;

    align-items: center;      /* 👈 по умолчанию выравнивание по вертикали */
    /* gap: 0.5rem;              👈 равномерный отступ между элементами */
}

.cq-col {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    flex: 0 0 auto;
    width: 100%;
    container-name: cq;
}
.cq-col-1 { width: 8.3333%; }
.cq-col-2 { width: 16.6667%; }
.cq-col-3 { width: 25.0%; }
.cq-col-4 { width: 33.3333%; }
.cq-col-5 { width: 41.6667%; }
.cq-col-6 { width: 50.0%; }
.cq-col-7 { width: 58.3333%; }
.cq-col-8 { width: 66.6667%; }
.cq-col-9 { width: 75.0%; }
.cq-col-10 { width: 83.3333%; }
.cq-col-11 { width: 91.6667%; }
.cq-col-12 { width: 100.0%; }
.cq-offset-1 { margin-left: 8.3333%; }
.cq-offset-2 { margin-left: 16.6667%; }
.cq-offset-3 { margin-left: 25.0%; }
.cq-offset-4 { margin-left: 33.3333%; }
.cq-offset-5 { margin-left: 41.6667%; }
.cq-offset-6 { margin-left: 50.0%; }
.cq-offset-7 { margin-left: 58.3333%; }
.cq-offset-8 { margin-left: 66.6667%; }
.cq-offset-9 { margin-left: 75.0%; }
.cq-offset-10 { margin-left: 83.3333%; }
.cq-offset-11 { margin-left: 91.6667%; }
.d-cq-none { display: none !important; }
.d-cq-block { display: block !important; }
.d-cq-inline { display: inline !important; }
.d-cq-inline-block { display: inline-block !important; }
.d-cq-flex { display: flex !important; }
.d-cq-grid { display: grid !important; }
.w-cq-25 { width: 25% !important; }
.w-cq-50 { width: 50% !important; }
.w-cq-75 { width: 75% !important; }
.w-cq-100 { width: 100% !important; }


@container cq (min-width: 256px) {
    .cq-col-xxs-1 { width: 8.3333%; }
    .cq-col-xxs-2 { width: 16.6667%; }
    .cq-col-xxs-3 { width: 25.0%; }
    .cq-col-xxs-4 { width: 33.3333%; }
    .cq-col-xxs-5 { width: 41.6667%; }
    .cq-col-xxs-6 { width: 50.0%; }
    .cq-col-xxs-7 { width: 58.3333%; }
    .cq-col-xxs-8 { width: 66.6667%; }
    .cq-col-xxs-9 { width: 75.0%; }
    .cq-col-xxs-10 { width: 83.3333%; }
    .cq-col-xxs-11 { width: 91.6667%; }
    .cq-col-xxs-12 { width: 100.0%; }
    .cq-offset-xxs-1 { margin-left: 8.3333%; }
    .cq-offset-xxs-2 { margin-left: 16.6667%; }
    .cq-offset-xxs-3 { margin-left: 25.0%; }
    .cq-offset-xxs-4 { margin-left: 33.3333%; }
    .cq-offset-xxs-5 { margin-left: 41.6667%; }
    .cq-offset-xxs-6 { margin-left: 50.0%; }
    .cq-offset-xxs-7 { margin-left: 58.3333%; }
    .cq-offset-xxs-8 { margin-left: 66.6667%; }
    .cq-offset-xxs-9 { margin-left: 75.0%; }
    .cq-offset-xxs-10 { margin-left: 83.3333%; }
    .cq-offset-xxs-11 { margin-left: 91.6667%; }
    .d-cq-xxs-none { display: none !important; }
    .d-cq-xxs-block { display: block !important; }
    .d-cq-xxs-inline { display: inline !important; }
    .d-cq-xxs-inline-block { display: inline-block !important; }
    .d-cq-xxs-flex { display: flex !important; }
    .d-cq-xxs-grid { display: grid !important; }
    .w-cq-xxs-25 { width: 25% !important; }
    .w-cq-xxs-50 { width: 50% !important; }
    .w-cq-xxs-75 { width: 75% !important; }
    .w-cq-xxs-100 { width: 100% !important; }

}
@container cq (min-width: 384px) {
    .cq-col-xs-1 { width: 8.3333%; }
    .cq-col-xs-2 { width: 16.6667%; }
    .cq-col-xs-3 { width: 25.0%; }
    .cq-col-xs-4 { width: 33.3333%; }
    .cq-col-xs-5 { width: 41.6667%; }
    .cq-col-xs-6 { width: 50.0%; }
    .cq-col-xs-7 { width: 58.3333%; }
    .cq-col-xs-8 { width: 66.6667%; }
    .cq-col-xs-9 { width: 75.0%; }
    .cq-col-xs-10 { width: 83.3333%; }
    .cq-col-xs-11 { width: 91.6667%; }
    .cq-col-xs-12 { width: 100.0%; }
    .cq-offset-xs-1 { margin-left: 8.3333%; }
    .cq-offset-xs-2 { margin-left: 16.6667%; }
    .cq-offset-xs-3 { margin-left: 25.0%; }
    .cq-offset-xs-4 { margin-left: 33.3333%; }
    .cq-offset-xs-5 { margin-left: 41.6667%; }
    .cq-offset-xs-6 { margin-left: 50.0%; }
    .cq-offset-xs-7 { margin-left: 58.3333%; }
    .cq-offset-xs-8 { margin-left: 66.6667%; }
    .cq-offset-xs-9 { margin-left: 75.0%; }
    .cq-offset-xs-10 { margin-left: 83.3333%; }
    .cq-offset-xs-11 { margin-left: 91.6667%; }
    .d-cq-xs-none { display: none !important; }
    .d-cq-xs-block { display: block !important; }
    .d-cq-xs-inline { display: inline !important; }
    .d-cq-xs-inline-block { display: inline-block !important; }
    .d-cq-xs-flex { display: flex !important; }
    .d-cq-xs-grid { display: grid !important; }
    .w-cq-xs-25 { width: 25% !important; }
    .w-cq-xs-50 { width: 50% !important; }
    .w-cq-xs-75 { width: 75% !important; }
    .w-cq-xs-100 { width: 100% !important; }

}
@container cq (min-width: 576px) {
    .cq-col-sm-1 { width: 8.3333%; }
    .cq-col-sm-2 { width: 16.6667%; }
    .cq-col-sm-3 { width: 25.0%; }
    .cq-col-sm-4 { width: 33.3333%; }
    .cq-col-sm-5 { width: 41.6667%; }
    .cq-col-sm-6 { width: 50.0%; }
    .cq-col-sm-7 { width: 58.3333%; }
    .cq-col-sm-8 { width: 66.6667%; }
    .cq-col-sm-9 { width: 75.0%; }
    .cq-col-sm-10 { width: 83.3333%; }
    .cq-col-sm-11 { width: 91.6667%; }
    .cq-col-sm-12 { width: 100.0%; }
    .cq-offset-sm-1 { margin-left: 8.3333%; }
    .cq-offset-sm-2 { margin-left: 16.6667%; }
    .cq-offset-sm-3 { margin-left: 25.0%; }
    .cq-offset-sm-4 { margin-left: 33.3333%; }
    .cq-offset-sm-5 { margin-left: 41.6667%; }
    .cq-offset-sm-6 { margin-left: 50.0%; }
    .cq-offset-sm-7 { margin-left: 58.3333%; }
    .cq-offset-sm-8 { margin-left: 66.6667%; }
    .cq-offset-sm-9 { margin-left: 75.0%; }
    .cq-offset-sm-10 { margin-left: 83.3333%; }
    .cq-offset-sm-11 { margin-left: 91.6667%; }
    .d-cq-sm-none { display: none !important; }
    .d-cq-sm-block { display: block !important; }
    .d-cq-sm-inline { display: inline !important; }
    .d-cq-sm-inline-block { display: inline-block !important; }
    .d-cq-sm-flex { display: flex !important; }
    .d-cq-sm-grid { display: grid !important; }
    .w-cq-sm-25 { width: 25% !important; }
    .w-cq-sm-50 { width: 50% !important; }
    .w-cq-sm-75 { width: 75% !important; }
    .w-cq-sm-100 { width: 100% !important; }

}
@container cq (min-width: 768px) {
    .cq-col-md-1 { width: 8.3333%; }
    .cq-col-md-2 { width: 16.6667%; }
    .cq-col-md-3 { width: 25.0%; }
    .cq-col-md-4 { width: 33.3333%; }
    .cq-col-md-5 { width: 41.6667%; }
    .cq-col-md-6 { width: 50.0%; }
    .cq-col-md-7 { width: 58.3333%; }
    .cq-col-md-8 { width: 66.6667%; }
    .cq-col-md-9 { width: 75.0%; }
    .cq-col-md-10 { width: 83.3333%; }
    .cq-col-md-11 { width: 91.6667%; }
    .cq-col-md-12 { width: 100.0%; }
    .cq-offset-md-1 { margin-left: 8.3333%; }
    .cq-offset-md-2 { margin-left: 16.6667%; }
    .cq-offset-md-3 { margin-left: 25.0%; }
    .cq-offset-md-4 { margin-left: 33.3333%; }
    .cq-offset-md-5 { margin-left: 41.6667%; }
    .cq-offset-md-6 { margin-left: 50.0%; }
    .cq-offset-md-7 { margin-left: 58.3333%; }
    .cq-offset-md-8 { margin-left: 66.6667%; }
    .cq-offset-md-9 { margin-left: 75.0%; }
    .cq-offset-md-10 { margin-left: 83.3333%; }
    .cq-offset-md-11 { margin-left: 91.6667%; }
    .d-cq-md-none { display: none !important; }
    .d-cq-md-block { display: block !important; }
    .d-cq-md-inline { display: inline !important; }
    .d-cq-md-inline-block { display: inline-block !important; }
    .d-cq-md-flex { display: flex !important; }
    .d-cq-md-grid { display: grid !important; }
    .w-cq-md-25 { width: 25% !important; }
    .w-cq-md-50 { width: 50% !important; }
    .w-cq-md-75 { width: 75% !important; }
    .w-cq-md-100 { width: 100% !important; }

}
@container cq (min-width: 992px) {
    .cq-col-lg-1 { width: 8.3333%; }
    .cq-col-lg-2 { width: 16.6667%; }
    .cq-col-lg-3 { width: 25.0%; }
    .cq-col-lg-4 { width: 33.3333%; }
    .cq-col-lg-5 { width: 41.6667%; }
    .cq-col-lg-6 { width: 50.0%; }
    .cq-col-lg-7 { width: 58.3333%; }
    .cq-col-lg-8 { width: 66.6667%; }
    .cq-col-lg-9 { width: 75.0%; }
    .cq-col-lg-10 { width: 83.3333%; }
    .cq-col-lg-11 { width: 91.6667%; }
    .cq-col-lg-12 { width: 100.0%; }
    .cq-offset-lg-1 { margin-left: 8.3333%; }
    .cq-offset-lg-2 { margin-left: 16.6667%; }
    .cq-offset-lg-3 { margin-left: 25.0%; }
    .cq-offset-lg-4 { margin-left: 33.3333%; }
    .cq-offset-lg-5 { margin-left: 41.6667%; }
    .cq-offset-lg-6 { margin-left: 50.0%; }
    .cq-offset-lg-7 { margin-left: 58.3333%; }
    .cq-offset-lg-8 { margin-left: 66.6667%; }
    .cq-offset-lg-9 { margin-left: 75.0%; }
    .cq-offset-lg-10 { margin-left: 83.3333%; }
    .cq-offset-lg-11 { margin-left: 91.6667%; }
    .d-cq-lg-none { display: none !important; }
    .d-cq-lg-block { display: block !important; }
    .d-cq-lg-inline { display: inline !important; }
    .d-cq-lg-inline-block { display: inline-block !important; }
    .d-cq-lg-flex { display: flex !important; }
    .d-cq-lg-grid { display: grid !important; }
    .w-cq-lg-25 { width: 25% !important; }
    .w-cq-lg-50 { width: 50% !important; }
    .w-cq-lg-75 { width: 75% !important; }
    .w-cq-lg-100 { width: 100% !important; }

}
@container cq (min-width: 1200px) {
    .cq-col-xl-1 { width: 8.3333%; }
    .cq-col-xl-2 { width: 16.6667%; }
    .cq-col-xl-3 { width: 25.0%; }
    .cq-col-xl-4 { width: 33.3333%; }
    .cq-col-xl-5 { width: 41.6667%; }
    .cq-col-xl-6 { width: 50.0%; }
    .cq-col-xl-7 { width: 58.3333%; }
    .cq-col-xl-8 { width: 66.6667%; }
    .cq-col-xl-9 { width: 75.0%; }
    .cq-col-xl-10 { width: 83.3333%; }
    .cq-col-xl-11 { width: 91.6667%; }
    .cq-col-xl-12 { width: 100.0%; }
    .cq-offset-xl-1 { margin-left: 8.3333%; }
    .cq-offset-xl-2 { margin-left: 16.6667%; }
    .cq-offset-xl-3 { margin-left: 25.0%; }
    .cq-offset-xl-4 { margin-left: 33.3333%; }
    .cq-offset-xl-5 { margin-left: 41.6667%; }
    .cq-offset-xl-6 { margin-left: 50.0%; }
    .cq-offset-xl-7 { margin-left: 58.3333%; }
    .cq-offset-xl-8 { margin-left: 66.6667%; }
    .cq-offset-xl-9 { margin-left: 75.0%; }
    .cq-offset-xl-10 { margin-left: 83.3333%; }
    .cq-offset-xl-11 { margin-left: 91.6667%; }
    .d-cq-xl-none { display: none !important; }
    .d-cq-xl-block { display: block !important; }
    .d-cq-xl-inline { display: inline !important; }
    .d-cq-xl-inline-block { display: inline-block !important; }
    .d-cq-xl-flex { display: flex !important; }
    .d-cq-xl-grid { display: grid !important; }
    .w-cq-xl-25 { width: 25% !important; }
    .w-cq-xl-50 { width: 50% !important; }
    .w-cq-xl-75 { width: 75% !important; }
    .w-cq-xl-100 { width: 100% !important; }

}
@container cq (min-width: 1400px) {
    .cq-col-xxl-1 { width: 8.3333%; }
    .cq-col-xxl-2 { width: 16.6667%; }
    .cq-col-xxl-3 { width: 25.0%; }
    .cq-col-xxl-4 { width: 33.3333%; }
    .cq-col-xxl-5 { width: 41.6667%; }
    .cq-col-xxl-6 { width: 50.0%; }
    .cq-col-xxl-7 { width: 58.3333%; }
    .cq-col-xxl-8 { width: 66.6667%; }
    .cq-col-xxl-9 { width: 75.0%; }
    .cq-col-xxl-10 { width: 83.3333%; }
    .cq-col-xxl-11 { width: 91.6667%; }
    .cq-col-xxl-12 { width: 100.0%; }
    .cq-offset-xxl-1 { margin-left: 8.3333%; }
    .cq-offset-xxl-2 { margin-left: 16.6667%; }
    .cq-offset-xxl-3 { margin-left: 25.0%; }
    .cq-offset-xxl-4 { margin-left: 33.3333%; }
    .cq-offset-xxl-5 { margin-left: 41.6667%; }
    .cq-offset-xxl-6 { margin-left: 50.0%; }
    .cq-offset-xxl-7 { margin-left: 58.3333%; }
    .cq-offset-xxl-8 { margin-left: 66.6667%; }
    .cq-offset-xxl-9 { margin-left: 75.0%; }
    .cq-offset-xxl-10 { margin-left: 83.3333%; }
    .cq-offset-xxl-11 { margin-left: 91.6667%; }
    .d-cq-xxl-none { display: none !important; }
    .d-cq-xxl-block { display: block !important; }
    .d-cq-xxl-inline { display: inline !important; }
    .d-cq-xxl-inline-block { display: inline-block !important; }
    .d-cq-xxl-flex { display: flex !important; }
    .d-cq-xxl-grid { display: grid !important; }
    .w-cq-xxl-25 { width: 25% !important; }
    .w-cq-xxl-50 { width: 50% !important; }
    .w-cq-xxl-75 { width: 75% !important; }
    .w-cq-xxl-100 { width: 100% !important; }

}