Display of grid

There is a code

    $(document).ready(function() {
        /*
        all__buttons=document.querySelectorAll('.header__button');
        
            [].forEach.call(all__buttons, function(selected__button){
                selected__button.addEventListener('click', function(event){
                    event.target.style.backgroundColor='#5f3ec0';
                    event.target.style.color='#ffffff';
                
                });
            }); 
        */
    
        $('.header__button').click(function(event){
                $('.header__button').removeClass('lilac');
                $(this).addClass('lilac');
                event.target.style.color='#ffffff';
        }
        );
    
if ((document.documentElement.clientWidth >= 320) and (document.documentElement.clientWidth <= 639))
{
const getItem = `<div class="cardexample">
                            <div class="mobileimage">
                                    <img class="mobiles" src="../img/mobileimage.png">
                            </div>
                            <div class="content__title">
                                Iphone 11, почему такой же как и Pro Max, может быть большим в 3 строки вот так
                            </div>
                            <div class="video__icon">
                                <span>
                                    <button class="crashvideo">Краш видео</button>
                                </span>
                                <span>
                                    <a href="#"><img class="youtube__icon-play" src="../img/Vector.png"></a>
                                </span> 
                                <span>
                                    <button class="crashvideo" id="ex2">Краш видео</button>
                                </span>                         
                            </div>
                            <div class="content__text">
                                Видео разбор с ответами на самые часто задаваемые вопросы может быть большим в 3 строки, видео разбор с ответами на самые часто задаваемые
                            </div>
                            <div class="endlink">
                                <a href="#">Читать далее</a>
                            </div>              
                        </div>
                        `;

            const getAllItems = () => {
                let content = '';
                
                for (let i=0; i<4; i++) {
                    content+=getItem;
                }
                return content;
            }       

            const renderAllItems = () => {
                document.getElementById('content').innerHTML=getAllItems();
            }

            renderAllItems();
        }           
    
        if ((document.documentElement.clientWidth >= 640) and (document.documentElement.clientWidth <= 1023))
        {
            document.getElementsByClassName('content__article').innerHTML = getItem;
            
        
        }
    
    
    }
    
    
    )

body {
    margin: 0;
    padding: 0;
}

:root {
    --containerfullwidth: 768;
}
.globalcontainer {
    margin-top: 0px;
    margin-right: calc((39/var(--containerfullwidth)*100)*1%);
    margin-bottom: 0px;
    margin-left: calc((39/var(--containerfullwidth)*100)*1%);
    /*height: 100%;*/
}

.header > .header__text {
position: relative;
width: 93px;
height: 24px;
left: 0;
margin-top: 129px;
margin-bottom: 20px;

font-family: TT Norms;
font-style: normal;
font-weight: bold;
font-size: 24px;
line-height: 100%;
/* identical to box height, or 24px */


color: #000000;
}

/*
.header__buttons {
    left: 0;
    top: 193px;
}
*/


.header__button {
    width: 75px;
    height: 30px;
    border-radius: 4px;
    border-color: #5f3ec0;
    background-color: #fff;
    margin-right: 1.75%;
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
}

.header__buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 7px 15px 7px 0px;
    overflow: hidden;
    /*margin-right: 10%;*/
}

.content {
    display: grid;
    grid-template-areas: "content__parttext content__parttext"
                         "content__parttext content__parttext"
                         "content__parttext content__parttext"
                         "content__parttext content__parttext";
    grid-template-columns: 1fr 1fr;
}

.content__article {
    grid-area: content__parttext;
}

<html>
<head>
<!-- <link rel="stylesheet" href="testsite.css">-->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test Example</title>
<link rel="stylesheet" type="text/css" href="../css/mobile.css" media="screen and (min-width: 320px) and (max-width: 639px)"></link>
<link rel="stylesheet" type="text/css" href="../css/tablet.css" media="screen and (min-width: 640px) and (max-width: 1023px)"></link>
<link rel="stylesheet" type="text/css" href="../css/desktop.css" media="screen and (min-width: 1024px) and (max-width: 1920px)"></link>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.6.0.min.js"></script>

</head>
<body>
    <div class="container">
        <div class="globalcontainer">
                <div class="header">
                        <div class="header__text">
                            Обзоры
                        </div>
                        <div class="header__buttons">
                            <!-- <span> -->
                                <button class="header__button">Все</button>
                                <button class="header__button">Видео</button>               
                                <button class="header__button">Текст</button>               
                                <button class="header__button">Обзоры</button>
                                <button class="header__button">Сравнения</button>
                                <button class="header__button">Краш видео</button>
                                <button class="header__button">Распаковка</button>
                            <!-- </span> -->
                        </div>
                </div>      
                <div class="content" id="content">      
                        <div class="content__article">
                        
                        </div>
                        <div class="content__article">
                        
                        </div>
                        <div class="content__article">
                        
                        </div>
                        <div class="content__article">
                        
                        </div>              
                        <div class="content__article">
                        
                        </div>
                        <div class="content__article">
                        
                        </div>
                        <div class="content__article">
                        
                        </div>
                        <div class="content__article">
                        
                        </div>              
                </div>              
                </div>              
                <button class="show__more">Показать еще</button>
        <!-- </div> -->
        <div class="footer">
                <div class="logo__company">
                </div>
                <div class="contacts">
                    <div class="contacts__title">
                        Контакты
                    </div>
                    <div class="contacts__telephones">
                        <div class="telephone1">
                        +7 (800) 333 32 24
                        </div>
                        <div class="telephone2">
                        +7 (812) 448 68 11
                        </div>
                    </div>
                    <button class="requestcall">
                        Заказать звонок
                    </button>
                </div>
                <div class="internetshop">
                        <div class="internetshop__title">
                            Интернет магазин
                        </div>
                        <div class="disclosure__arrow">
                            >
                        </div>
                </div>
                <div class="company">
                        <div class="company__title">
                            Компания
                        </div>
                        <div class="disclosure__arrow">
                            >
                        </div>
                </div>
                <div class="help__to__the__buyer">
                        <div class="help__to__the__buyer__title">
                            Помощь покупателю
                        </div>
                        <div class="disclosure__arrow">
                            >
                        </div>                  
                </div>
                <div class="socialnetworks__links">
                        <div class="socialnetworks__links__title">
                            Мы в соц. сетях
                        </div>
                        <div class="socialnetworks__links-images">
                            <div class="facebook-image">
                                <embed src="../img/facebook.svg">
                            </div>
                        </div>
                </div>
                <div class="allrights">
                        <div class="allrights__text">
                            © 2020 Все права защищены
                        </div>
                </div>
        </div>          
    </div>
<script type="text/javascript" src="jsactions.js"></script>
</body>
</html>

It should be displayed as at https://www.figma.com/file/noqP1gzhrAlGAErPNBgknp/test?node-id=0%3A1 (tablet view), but my pictures (content block) after header__buttons are not displayed. Tell me how to fix the display.