Hungary national flag HTML+CSS

<html>
    <head>
        <title>Hungary Flag example</title>
        <style>
            main { width: 100%; height: 100%; margin: auto 0; }
            div.flag
            {
                width: 100%;
                max-width: 500px;
                display: flex;
                flex-direction: column;
                aspect-ratio: 5 / 3;
            }

            div.flag > span
            {
                flex: 1;
                width: 100%;
            }

            div.flag.hungary > span:first-child { background-color: #CE2939; }
            div.flag.hungary > span:nth-child(2) { background-color: #FFFFFF; }
            div.flag.hungary > span:last-child { background-color: #477050; }
        </style>
    </head>
    <body>
        <main>
            <div class="flag hungary"><span></span><span></span><span></span>
        </div>
    </main>
    </body>
</html>