How do I fix the css of my code to make it less crowded when the browser is smaller?

I created an front end page for a bunch of modal buttons which look pretty well on my screen. But when I reduce the browser size or run the application on my laptop the buttons collide into each other.

This is how it looks normally (https://imgur.com/gallery/0603cMO) on my screen.

This is what it looks like when the browser size is reduced (https://imgur.com/gallery/KbDPsIG)

How I have laid it out is each row is its own container of buttons, and the three containers are on top of each other.

            <Container>
                <Button onClick={openAriModal}> <img src={ari} alt="ari" height='300' width='200' /> </Button>
                <Button onClick={openCasModal}> <img src={cas} alt="cas" height='300' width='200' /> </Button>
                <Button onClick={openCatModal}> <img src={cat} alt="cat" height='300' width='200' /> </Button>
                <Button onClick={openGraModal}> <img src={gra} alt="gra" height='300' width='200' /> </Button>
                <Button onClick={openHowModal}> <img src={how} alt="how" height='300' width='200' /> </Button>
                <Button onClick={openKagModal}> <img src={kag} alt="kag" height='300' width='200' /> </Button>
                <Button onClick={openKikModal}> <img src={kik} alt="gra" height='300' width='200' /> </Button>

                <AriModal showModal={showAriModal} setShowModal={setAriShowModal}/>
                <CasModal showModal={showCasModal} setShowModal={setCasShowModal}/>
                <CatModal showModal={showCatModal} setShowModal={setCatShowModal}/>
                <GraModal showModal={showGraModal} setShowModal={setGraShowModal}/>
                <HowModal showModal={showHowModal} setShowModal={setHowShowModal}/>
                <KagModal showModal={showKagModal} setShowModal={setKagShowModal}/>
                <KikModal showModal={showKikModal} setShowModal={setKikShowModal}/>
       
            </Container>

            <SecondContainer>
                <Button onClick={openMarModal}> <img src={mar} alt="mar" height='300' width='200' /> </Button>
                <Button onClick={openOnlModal}> <img src={onl} alt="onl" height='300' width='200' /> </Button>
                <Button onClick={openPomModal}> <img src={pom} alt="pom" height='300' width='200' /> </Button>
                <Button onClick={openPonModal}> <img src={pon} alt="pon" height='300' width='200' /> </Button>
                <Button onClick={openPopModal}> <img src={pop} alt="pop" height='300' width='200' /> </Button>
                <Button onClick={openPorModal}> <img src={por} alt="por" height='300' width='200' /> </Button>
                <Button onClick={openPriModal}> <img src={pri} alt="pri" height='300' width='200' /> </Button>
                
                

                <MarModal showModal={showMarModal} setShowModal={setMarShowModal}/> 
                <OnlModal showModal={showOnlModal} setShowModal={setOnlShowModal}/>   
                <PomModal showModal={showPomModal} setShowModal={setPomShowModal}/>  
                <PonModal showModal={showPonModal} setShowModal={setPonShowModal}/>  
                <PopModal showModal={showPopModal} setShowModal={setPopShowModal}/>
                <PorModal showModal={showPorModal} setShowModal={setPorShowModal}/>
                <PriModal showModal={showPriModal} setShowModal={setPriShowModal}/>
               
            </SecondContainer>

            <ThirdContainer>
                <Button onClick={openSpiModal}> <img src={spi} alt="spi" height='300' width='200' /> </Button>
                <Button onClick={openTalModal}> <img src={tal} alt="tal" height='300' width='200' /> </Button>
                <Button onClick={openTotModal}> <img src={tot} alt="tot" height='300' width='200' /> </Button>
                <Button onClick={openTurModal}> <img src={tur} alt="tur" height='300' width='200' /> </Button>
                <Button onClick={openWhiModal}> <img src={whi} alt="whi" height='300' width='200' /> </Button>
                <Button onClick={openWinModal}> <img src={win} alt="win" height='300' width='200' /> </Button>
                <Button onClick={openYamModal}> <img src={yam} alt="yam" height='300' width='200' /> </Button>

                <SpiModal showModal={showSpiModal} setShowModal={setSpiShowModal}/>
                <TalModal showModal={showTalModal} setShowModal={setTalShowModal}/>
                <TotModal showModal={showTotModal} setShowModal={setTotShowModal}/>
                <TurModal showModal={showTurModal} setShowModal={setTurShowModal}/>
                <WhiModal showModal={showWhiModal} setShowModal={setWhiShowModal}/>
                <WinModal showModal={showWinModal} setShowModal={setWinShowModal}/>
                <YamModal showModal={showYamModal} setShowModal={setYamShowModal}/>

            </ThirdContainer>

This is the css for each of the containers

const Container = styled.div`

  display: flex;
  justify-content: center;
  align-items:center;
  height:40vh;
  
`;

const SecondContainer = styled.div`

    display: flex;
    justify-content: center;
    align-items:center;
    height:10vh;

`;

const ThirdContainer = styled.div`

    display: flex;
    justify-content: center;
    align-items:center;
    height:40vh;

`;

This is the css for the image buttons.

const Button = styled.button`
    min-width: 100px;
    padding:0px px;
    border-radius:0px;
    border:none;
    background:#FFF;
    color:#fff;
    font-size:24px;
    cursor:pointer;
    margin-right:20px;

`;