@media only screen and (max-width: 750px) {

    @font-face {
        font-family: "CascadiaMono";
        src:local("CascadiaMono"),url("/static/main/fonts/CascadiaMono.ttf");
        font-family: 'MelinerRegular';
        src: local('MelinerRegular'), 
            url('/static/main/fonts/meliner.woff');
        font-family: 'Codename Coder Free 4F';
        src: local('Codename Coder Free 4F'), 
            url('/static/main/fonts/Codenamecoder.woff'),
            url('/static/main/fonts/Codenamecoder4.ttf'),
            url('/static/main/fonts/Codenamecoderfree4fbold.woff2');    
        
        
    }
    img{
        max-width: 100%;
        height: auto;
    }
    .article__article-image img {
        max-width: 100%;
        display: block;
        height: auto;
    }
    .golova {
        display: flex;
        width: 95%;
        margin: 0 auto;
        flex-direction: column;
        align-items: center;
    }
    .glavk_index{
        display: flex;
        flex-direction: column;
    }
    .slogan {
        position:fixed;
        margin-inline: 0;
        text-align: -webkit-center;
        position: relative;
        top: 0;
    }
    .gilaytron {
        top:0;
        right: 0;
        position: relative;
        display: flex;
        align-items: center;
        width: 80mm;
        height: 3mm;
        background: #565656;
        margin-block: 2mm;
        margin-inline: -2mm;
        border-radius: 2mm;
        padding-block: 0.7mm;
        flex-direction: row;
    }
    .name_zagruzka{
        /* font-family: "CascadiaMono";  */
        font-size: 12px;
        width: 25mm;
        top: 3.5mm;
        background: #565656;
        margin-inline: 25.5mm;
        margin-block: 0mm;
    }
    
    .progress {
        background: #ffffff;
        height: 2mm;
        width: 88%;
        border-radius: 2mm;
        margin-inline: 1mm;
        
    }
    #name{
        text-align: center;
        margin: 0 auto;
        font-size: 10mm;
        font-family: 'Franklin Gothic Medium';
    }
    /* Была проблема с предопределение стилей медиа запросов и батон табс применялся сразу, я его поместил выше и всё стало ништяк */
    .button_tubs {
        position: relative;
        /* background: #0f0e10; */
        appearance: none;
        border: 0;
        border-radius: 5px;
        background: #0f0e10;
        color: #fff;
        padding: 8px 10px;
        font-size: 14px;
        cursor: pointer;
        margin-inline: 4px;
        transition: all .3s;
    }
    
    
    .zogolovok {
        margin-block: 1%;
        margin-inline: 5%;
        display: block;
        text-align: -webkit-center;
    }
    .formtabs{
        top: 0mm;
        display: flex;
        margin-inline: 0mm;
        position: relative;
        flex-direction: row;
        justify-content: center;
        padding-inline: 5px;
    }
    #rectangle_anket {
        font-size: 8mm;
        height: 115mm;
        margin-top: 10mm;
        border-radius: 3mm;
        background: #080808;
        margin-inline: auto;
    }
    .rectangle_tabs {
        display: flex;
        width: fit-content;
        height: 45px;
        margin-top: 10px;
        border-radius: 3mm;
        background: #080808;
        margin-inline: -3mm;
    }
    .solderimg {
        position: relative;
        top: 1mm;
        right: 0;
    }
    .link {
        margin-block: 1mm;
        width: inherit;
        top: 25mm;
        display: flex;
        align-items: center;
        justify-content: space-between;
        top: unset;
        right: unset;
        float: none;
        display: none;
        
    }
    .linkvk {
        margin-inline-end: 77mm;
        float: right;
        width: 28px;
        height: auto;
    }
    .linkavito {
        width: 40px;
        height: 40px;
    }
    .main_vitrini {
        display: flex;
        flex-wrap: wrap;
        width: fit-content;
        flex-direction: column;
        margin-inline: auto;
        align-items: center;
    }
    .robotyaga {
        margin-block: 10mm;
        width: fit-content;
        height: auto;
        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
        border-radius: 11.3386px;
        background-color: #191919;
    }
    .opisanie_primer {
        background: #262626;
        width: 90mm;
        height: fit-content;
        border-radius: 3mm;
        margin-inline: 5mm;
        margin-block-end: 5mm;
        border: 1px solid rgba(0, 0, 0, 0.2);
        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    }
    .neispravnost_primer {
    width: 80mm;}
    .rasstanovka_horizontal {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
    }
    .vitrina1 {
        margin-top: 15mm;
        background: #1a1a1af2;
        float: left;
        font-size: 24px;
        border-radius: 3mm;
        width: fit-content;
        margin-inline: 4mm;
        padding: 3mm;
    }
    .vitrina2 {
        display: flex;
        justify-content: center;
        flex-direction: column;
        margin-top: 0;
        margin-inline: 0;
        background: #1a1a1af2;
        float: left;
        font-size: 16px;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        border-radius: 3mm;
        width: fit-content;
        height: 45mm;
        align-self: flex-start;
    }
    .vitrina3 {
        align-self: flex-end;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        margin-top: -45mm;
        background: #1a1a1af2;
        float: left;
        font-size: 16px;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        border-radius: 3mm;
        width: 45mm;
        height: 45mm;
        margin-inline: 0;
    }
    .vitrina4 {
        align-self: center;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        margin-top: 5mm;
        background: #1a1a1af2;
        float: left;
        font-size: 16px;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        border-radius: 3mm;
        width: 45mm;
        height: 45mm;
        margin-inline: 0;
    }
    .OTZ {
        width: fit-content;
        position: unset;
        text-align: center;
        margin-block-start: 10mm;
        border-width: medium;
        margin-left: 5mm;
        margin-right: 5mm;
        margin-bottom: 10mm;
        padding-left: 5mm;
        padding-right: 5mm;
        padding-top: 1mm;
        padding-bottom: 5mm;
        background: #181818db;
        border-radius: 2mm;
        height: 130mm;
        font-family: 'Codename Coder Free 4F';
    }
    
    /* Для магазина и поддержки */
    .vitrina {
        position: relative;
        background: #080808;
        font-size: 16px;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        border-radius: 3mm;
        margin-block: 10mm;
        width: auto;
        margin-inline: 1mm;
        display: block;
    
    }
    .zogolovok_vitrini {
        background: #161515;
        border-radius: 3mm;
        margin-left: 1.5mm;
        margin-top: 1.5mm;
        margin-right: 1.5mm;
        padding-block: 5mm;
        padding-left: 6mm;
        padding-right: 6mm;
        text-align: center;
        font-size: 21px;
    }
    .zagolovok_vitrin_product {
    background: #161515cc;
    border-radius: 3mm;
    margin-top: 1.5mm;
    padding-block: 4.5mm;
    padding-left: 6mm;
    padding-right: 6mm;
    text-align: center;
    font-size: 21px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    }
    .content_vitrin_product {
    display: flex;
    border-width: medium;
    padding-top: 8mm;
    padding-bottom: 10mm;
    flex-direction: column;
    align-items: center;
    }
    .product {
    display: flex;
    width: fit-content;
    height: fit-content;
    margin-inline: 0;
    margin-block: 3mm;
    background: #161515cc;
    border-radius: 10mm;
    flex-direction: column;
    align-items: center;
    padding: 5mm;
    }
    /* Для списка статей */
    .zagolovok_statie {
        position: relative;
        z-index: 2;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        font-style: normal;
        font-size: 24px;
    }
    .rectangle_statie {
        position: relative;
        background: #080808;
        font-size: 16px;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        border-radius: 3mm;
        margin-block: 10mm;
        width: auto;
        margin-inline: 1mm;
        padding-block-end: 1mm;
    }
    .meta {
        position: relative;
        display: flex;
        color: #787373;
        flex-direction: row-reverse;
        align-items: center;
        justify-content: flex-start;
        margin-inline: 10mm;
        margin-block: -5px;
    }
    
    .data {
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        font-size: 14px;
        border-width: medium;
        border-style: solid;
        border-color: #161515;
        border-radius: 1mm;
        background: #161515;
        width: fit-content;
        padding-block: 1mm;
        padding-inline: 2mm;
        position: relative;
        margin-inline: 3px;
        margin:0mm;
    }
    .view {
        position: relative;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        font-size: 14px;
        border-width: medium;
        border-style: solid;
        border-color: #161515;
        border-radius: 1mm;
        background: #161515;
        width: fit-content;
        display: flex;
        align-items: center;
        padding-right: 1mm;
        height: 6mm;
        margin:0mm;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        margin-inline: 3px;
    }
    .like {
        background-color: #161515;
        display: flex;
        position: relative;
        margin:0mm;
        width: auto;
        height: 7.6mm;
        border-radius: 1mm;
        transition: all .3s;
        align-items: center;
        justify-content: center;
        margin-inline: 3px;
        padding-inline-start: 1.5mm;
    }
    /* Для статей */
    
    .zagolovok_statiay{
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif,'Codename Coder Free 4F';
        font-style: normal;
        font-size: 24px; 
    }
    .rectangle_statiay {
        background: #080808;
        font-size: 16px;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif,'Codename Coder Free 4F';
        margin-top: 5mm;
        margin-left: 0mm;
        border-radius: 3mm;
        width: 100%;
        height: auto;
        position: relative;
        display: inline-block;
        margin-bottom: 30mm;
    }
    .photogolovok_statiay {
        background: #161515;
        border-top-left-radius: 3mm;
        border-top-right-radius: 3mm;
        margin-left: -7mm;
        margin-top: -6.5mm;
        margin-right: 2mm;
        padding-block: 5mm;
        padding-left: 6mm;
        padding-right: 6mm;
        padding-bottom: 5mm;
        height: 60mm;
        text-align-last: start;
    }
    .photogolovok {
        background-image: url(media/{{p.photo}});
        background: #161515;
        border-radius: 3mm;
        margin-left: 1.5mm;
        margin-top: 1.5mm;
        margin-right: 1.5mm;
        padding-block: 5mm;
        height: 45mm;
        /* margin-bottom: 10mm; */
        padding-left: 6mm;
        padding-right: 6mm;
        position: relative;
        overflow: hidden;
        z-index: 1;
    }
    .statiay {
        margin-top: 6mm;
        margin-left: 7mm;
        margin-bottom: 10mm;
        margin-right: -2mm;
    }
    .content_statiay {
        margin-top: 25mm;
        margin-left: 5mm;
        margin-right: 5mm;
    }
    .content_statie {
        position: relative;
        top: -1mm;
        left: 0mm;
        margin-left: 5mm;
        margin-right: 5mm;
        border-width: medium;
        border-style: none;
        border-color: #161515;
        border-radius: 3mm;
        padding-left: 1mm;
        padding-right: 1mm;
        padding-top: 1mm;
        padding-bottom: 1mm;
    }
    .meta_statiay {
        position: absolute;
        display: flex;
        margin-top: 0mm;
        color: #787373;
        margin-inline: 0;
        flex-direction: row-reverse;
        align-items: flex-end;
        right: 7mm;
    }
    .data_statiay {
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        font-size: 14px;
        border-width: medium;
        border-style: solid;
        border-color: #161515;
        border-radius: 1mm;
        background: #161515;
        width: max-content;
        padding-block: 1mm;
        padding-inline: 2mm;
        margin-top: -1.5mm;
        margin-left: 0mm;
        position: relative;
    }

    .view_statiay {
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        font-size: 14px;
        border-width: medium;
        border-style: solid;
        border-color: #161515;
        border-radius: 1mm;
        background: #161515;
        width: fit-content;
        display: flex;
        align-items: center;
        padding-right: 1mm;
        height: 6mm;
        position: relative;
        margin-inline: 3px;
        margin-top: 0mm; 
        margin-left: 0mm;
    }
    .main_box {
        margin-block: 0mm;
        position: absolute;
        margin-inline: 14mm;
    }
    /* .like {
        background-color: #161515;
        display: flex;
        position: absolute;
        margin: -31px;
        width: auto;
        height: 7.6mm;
        border-radius: 1mm;
        transition: all .3s;
        align-items: center;
        justify-content: center;
        margin-inline: 0px;
        padding-inline-start: 1.5mm;
        margin-inline: -145px;
        margin: -32px;
    } */
    .like {
        background-color: #161515;
        display: flex;
        position: relative;
        margin: 0mm;
        width: 12mm;
        height: 7.8mm;
        border-radius: 1mm;
        transition: all .3s;
        align-items: center;
        justify-content: center;
        margin-inline: 4px;
        /* padding-inline-start: 1.5mm; */
    }
    pre{
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 16px;
        scrollbar-width: none;}
    }
    .modal {
    display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; 
    background: rgba(0,0,0,0.9); z-index: 9999; cursor: zoom-out;
    }
    .modal.active { display: flex; align-items: center; justify-content: center; }
    .modal img {
    max-width: 80vmin; max-height: 80vmin; /* Увеличивает в 2-3 раза относительно экрана */
    width: auto; height: auto; 
    transform: scale(0); transition: transform 0.3s ease;
    cursor: zoom-out; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    }
    .modal.active img { transform: scale(1.1); }
    img { cursor: pointer; transition: transform 0.2s; }
    img:hover { transform: scale(1.05); }

@media only screen and (max-width: 1050px) {
    
}