reactjs: cómo dejar de escalar el objeto cuando el objeto alcanza el 100% del ancho de la pantalla para una escala del 150%, etc.

He creado 2 sitios web casi similares. El primero está en WordPress Elementor, el segundo son los componentes de estilo React +. En el sitio de WordPress, tengo 4 columnas como tarjetas (el proyecto React también tiene 4 columnas). Cuando empiezo a escalar el sitio web (CTRL + Wheel Up) las tarjetas (imágenes incluidas) se escalan hasta alcanzar el 100% del ancho de la pantalla. Entonces se detiene. Estoy usando una escala estándar de Windows al 100 % con un monitor de 24″ con una resolución de 1920 x 1080.

También tengo una computadora portátil con una pantalla pequeña, algo así como 13 «FHD, pero la escala de Windows está configurada en 150% y existe un problema para mi aplicación React.

Me gustaría preguntarle cómo puedo llegar fácilmente a este comportamiento, por favor.

La dirección del sitio de wordpress está aquí: https://www.rpgmma.cz/#zapasnici

Diferente entre el proyecto React y el proyecto WordPress

No sé si es importante para esta pregunta, pero aquí está mi código:

Índice.js

<ServicesContainer id="services">
      <ServicesH1>Naši Atleti</ServicesH1>
      <ServiceMainP>Aktuálně nás na profesionální úrovní representují tito atleti. RPG též representuje mnoho atletů
        na
        amatérské úrovni.</ServiceMainP>
      <CenterWrapper>
        <ServicesWrapper>
          <ServicesCards>
            <NameWrapperH3>
              <FirstName>Name</FirstName>
              <Nickname>"Nickname"</Nickname>
              <LastName>LastName</LastName>
            </NameWrapperH3>
            <SportWrapper>
              <SportName>MMA, Box</SportName>
            </SportWrapper>
            <SocialWrapper>
              <a href="https://www.google.com/">
                <FacebookIcon/>
              </a>
              <a href="https://www.google.com/">
                <InstagramIcon/>
              </a>
            </SocialWrapper>
            <ServicesIcon src={Photo1}/>
            <ButtonWrapper>
              <Button>Zjistit více</Button>
            </ButtonWrapper>
          </ServicesCards>
          <ServicesCards>
            <NameWrapperH3>
              <FirstName>Name</FirstName>
              <Nickname>"Nickname"</Nickname>
              <LastName>LastName</LastName>
            </NameWrapperH3>
            <SportWrapper>
              <SportName>MMA, Box</SportName>
            </SportWrapper>
            <SocialWrapper>
              <a href="https://www.google.com/">
                <FacebookIcon/>
              </a>
              <a href="https://www.google.com/">
                <InstagramIcon/>
              </a>
            </SocialWrapper>
            <ServicesIcon src={Photo2}/>
            <ButtonWrapper>
              <Button>Zjistit více</Button>
            </ButtonWrapper>
          </ServicesCards>
          <ServicesCards>
            <NameWrapperH3>
              <FirstName>Name</FirstName>
              <Nickname>"Nickname"</Nickname>
              <LastName>LastName</LastName>
            </NameWrapperH3>
            <SportWrapper>
              <SportName>MMA, Box</SportName>
            </SportWrapper>
            <SocialWrapper>
              <a href="https://www.google.com/">
                <FacebookIcon/>
              </a>
              <a href="https://www.google.com/">
                <InstagramIcon/>
              </a>
            </SocialWrapper>
            <ServicesIcon src={Photo3}/>
            <ButtonWrapper>
              <Button>Zjistit více</Button>
            </ButtonWrapper>
          </ServicesCards>
          <ServicesCards>
            <NameWrapperH3>
              <FirstName>Name</FirstName>
              <Nickname>"Nickname"</Nickname>
              <LastName>LastName</LastName>
            </NameWrapperH3>
            <SportWrapper>
              <SportName>MMA, Box</SportName>
            </SportWrapper>
            <SocialWrapper>
              <a href="https://www.google.com/">
                <FacebookIcon/>
              </a>
              <a href="https://www.google.com/">
                <InstagramIcon/>
              </a>
            </SocialWrapper>
            <ServicesIcon src={Photo4}/>
            <ButtonWrapper>
              <Button>Zjistit více</Button>
            </ButtonWrapper>
          </ServicesCards>
        </ServicesWrapper>
      </CenterWrapper>
    </ServicesContainer>

Estilo.js

export const ServicesContainer = styled.div`
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #010606;
    padding-bottom: 20px;
`

export const CenterWrapper = styled.div`
    display: flex;
`

export const ServicesWrapper = styled.div`
    display: inline-flex;
    flex-wrap: wrap;
    margin: auto;
    justify-content: center;
    grid-gap: 16px;
    padding: 0 50px;
`

export const ServicesH1 = styled.h1`
    font-size: ${firstHeading};
    position: relative;
    text-align: center;
    color: ${white};
    margin-bottom: 64px;

    @media screen and (max-width: 480px) {
        font-size: 2rem;
    }

    /*underline*/

    &:after {
        bottom: 0;
        content: "";
        display: block;
        height: 2px;
        position: absolute;
        background: ${red};
        transition: width 0.3s ease 0s, left 0.3s ease 0s;
        width: 90%;
        left: 5%;
    }
`

export const ServiceMainP = styled.p`
    text-align: center;
    color: ${white};
    margin-bottom: 64px;
`

export const ServicesCards = styled.div`
    background: ${black};
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
    transition: all 0.2s ease-in-out;

    &:hover {
        transform: scale(1.02);
        transition: all 0.2s ease-in-out;
        cursor: pointer;
    }
`

export const SportWrapper = styled.div`
    width: 100%;
`

export const SportName = styled.h4`
    color: ${red};
    font-size: ${fourthHeading};
    margin-bottom: 10px;
`

export const SocialWrapper = styled.div`
    width: 100%;
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
`

export const FacebookIcon = styled(FaFacebookF)`
    color: ${white};
    font-size: 2.3rem;
    background-image: url(https://www.google.com);

    &:hover {
        color: ${red}
    }
`

export const InstagramIcon = styled(FaInstagram)`
    color: ${white};
    font-size: 2.3rem;

    &:hover {
        color: ${red}
    }
`

export const ServicesIcon = styled.img`
    margin-bottom: 10px;
`

export const ServicesH2 = styled.h2`
    font-size: ${secondHeading};
    margin-bottom: 10px;
`

export const ServicesH3 = styled.h3`
    font-size: ${thirdHeading};
    color: ${white};
    margin-bottom: 10px;
`

export const ServicesH4 = styled.h3`
    font-size: ${fourthHeading};
    margin-right: auto;
    color: ${red};
    margin-bottom: 10px;
`

export const ButtonWrapper = styled.div`
    display: flex;
    justify-content: center;
    text-align: center;
    margin: 20px 0;
`
export const Button = styled.button`
    color: ${white};
    transition: 0.25s;
    background: ${darkRed};
    border: 2px solid ${darkRed};
    font: inherit;
    line-height: 1;
    margin: 0.5em;
    padding: .8em 1.5em;


    font-size: 1.5rem;
    font-weight: 900;
    text-transform: uppercase;


    &:hover, &:focus {
        box-shadow: inset 0 0 0 2em #000;
        cursor: pointer;
        border-color: ${darkRed};
        color: #fff;
    }
`

export const NameWrapperH3 = styled.h3`
    width: 100%;
`

export const FirstName = styled.span`
    display: block;
    font-size: ${thirdHeading};
    color: ${white};
    text-align: left;
`

export const Nickname = styled.span`
    display: block;
    font-size: ${thirdHeading};
    color: ${white};
    text-align: center;
`

export const LastName = styled.span`
    display: block;
    font-size: ${thirdHeading};
    color: ${white};
    text-align: right;
`