styled bad order

[einar-hjortdal]

const LinksRow = styled.div`
  display: flex;
  justify-content: space-between;
  gap: 2.5vw;
  & ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    width: 100%;
  }
  & ul li {
    list-style: none;
    border-bottom: ${props => props.theme.borderStyle};
  }
  & ul li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    color: ${props => props.theme.black};
    padding: .5vw 0;
    transition: color .2s, background-color .2s, padding .3s;
  }
  & ul li a:hover {
    color: ${props => props.theme.white};
    background-color: ${props => props.theme.black};
    padding: .5vw;
  }
  @media (prefers-reduced-motion: reduce) {
    & ul li a {
      transition: none;
    }
  }
`

the media query style is outputted before the & ul li a style.

@media (prefers-reduced-motion: reduce) {
  .dk-cadhch {}

  .dk-cadhch ul li a {
    transition: none;
  }
}

.dk-bfhafa {}

.dk-bfhafa ul li {
  list-style: none;
  border-bottom: solid 1px #1e1f1f;
}

.dk-bdfidj {}

.dk-bdfidj ul li a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-decoration: none;
  color: #1e1f1f;
  padding: .5vw 0;
  transition: color .2s, background-color .2s, padding .3s;
}

Because they have the same specificity, the browser ignores the media query styles. I believe the media query should be put after the styles defined before it.