为什么我的媒体查询无法正确应用？

Question

无论屏幕尺寸如何，仅应用最后声明的媒体查询。在下面的示例组件中，即使屏幕宽度为 320px，颜色也始终为绿色。

断点：

const size = {
    mobileM: '400px',
    mobileL: '480px',
    tablet: '760px',
    laptop: '1280px', 
    desktopM: '1530px',
    desktopL: '1920px',
};

export const devices = {
    mobileM: `(min-width: ${size.mobileM})`,
    mobileL: `(min-width: ${size.mobileL})`,
    tablet: `(min-width: ${size.tablet})`,
    laptop: `(min-width: ${size.laptop})`,
    desktopM: `(min-width: ${size.desktopM})`,
    desktopL: `(min-width: ${size.desktopL})`
};

示例组件：

import React from 'react'
import styled from 'styled-components'
import { devices } from '../utils/breakpoints';

function Welcome() {
  return (<>
    <HeaderMessage>Welcome</HeaderMessage>
    <BodyText>
      This questionnaire is used to help us understand your business goals and needs and guide us to create the best solution for you. 
    </BodyText>
    
    <BodyText>
      Please be as specific as possible in your answers as it will give us the most insight and enable us to help you best. 
    </BodyText>
    
    <BodyText>
      Use the back arrow in the top left corner at any time to navigate to a previous page to amend your answers.
    </BodyText>

  </>)
}

// font-family: 'Krona One', sans-serif;
// font-family: 'Montserrat', sans-serif;

const HeaderMessage = styled.h1`
  color: #BA3D9C;
  text-transform: uppercase;
  font-family: 'Krona One', sans-serif;
  font-size: 6rem;
  letter-spacing: .5rem;
  margin-top: -13vw;
  margin-bottom: 5rem;
  @media ${devices.mobileM} {
    margin-top: 0;
    color: turquoise;
  }
  
  @media ${devices.mobileL} {
    color: blue;
    font-size: 5rem;
    margin-top: 1rem;
    margin-bottom: 2rem;
  }

  @media ${devices.tablet}{
    color: green;
    font-size: 4rem;
    margin-top: 1rem;
  }
`;

在上面的组件中，即使屏幕宽度为 320px，颜色也始终为绿色。

Answer 1

我相信每个媒体查询结束括号后都需要一个

;

}

。