Помогите пожалуйста

Подскажите если кто-то шарит, нужно чтобы блоки переносились как на 1м скриншоте, но почему-то после уменьшения меньше 800px div’ы начинают уменьшаться, а не переноситься


Ссылка на видео где показано про что я - https://youtu.be/N0d9jtojkgk

><!doctype html>
<html lang="ru">

<head>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .privet {
            margin: 3px;
            padding: 13px;
            background-color: green;
            border-radius: 47px;
        }

        .asda {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            width: 100%;
        }
    </style>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="style.css" />
</head>

<body>
    <div class="asdasdasdas">
        <h2>asdasd</h2>
        <div class="asda">
            <div class="privet">команда 1</div>
            <div class="privet">команда 1</div>
            <div class="privet">команда 1</div>
            <div class="privet">команда 1</div>
            <div class="privet">команда 1</div>
            <div class="privet">команда 1</div>
            <div class="privet">команда 1</div>
            <div class="privet">команда 1</div>
            <div class="privet">команда 1</div>
            <div class="privet">команда 1</div>
            <div class="privet">команда 1</div>
            <div class="privet">команда 1</div>
        </div>
    </div>

</body>

</html>