Whatever I place under the@media (min-width: 1920px) changes the styles at a smaller size screen. Basically I´m working only on laptop screen, full laptop screen and 24 inches screens and full size 24 inches screen.

For example, in the below code, whatever height I place under the media query for .trafficLight, will overwrite the native .trafficLight height

:root {
  --red: #dd1e10;
  --red-dark: #dd1e1033;
  --amber: #f7b500;
  --amber-dark: #f7b50033;
  --green: #33a532;
  --green-dark: #33a53233;
  --speed: 1.5s;
  --opacity-off: 0.35;
  --shadow-spread: 15px;
}

.traffic-light-container {
  display: flex;
  flex-direction: column;
}

.traffic-light-title {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  font-size: 1em;
  color: #333;
}

.trafficLight {
  background-color: black;
  width: 40px;
  height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 4px 2px;
  border-radius: 16px;
}

.light-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.light-container .label {
  margin-left: 4%;
  color: white;
  font-size: 0.9em;
  flex-grow: 1;
  max-width: calc(100% - 35px - 4%);
}

.label {
  background-color: transparent !important;
  border-radius: 0 !important;
  white-space: nowrap;
  font-weight: 600;
}

.trafficLight span {
  width: 25px;
  height: 25px;
  border-radius: 100%;
  background-color: #2a2c2e;
}

.red {
  background-color: var(--red) !important;
  box-shadow: 0 0 30px var(--shadow-spread) var(--red),
    0 0 60px var(--shadow-spread) var(--red-dark);
  animation-delay: 0s;
}

.yellow {
  background-color: var(--amber) !important;
  box-shadow: 0 0 30px var(--shadow-spread) var(--amber),
    0 0 60px var(--shadow-spread) var(--amber-dark);
  animation-delay: calc(var(--speed) * 1);
}

.green {
  background-color: var(--green) !important;
  box-shadow: 0 0 30px var(--shadow-spread) var(--green),
    0 0 60px var(--shadow-spread) var(--green-dark);
  animation-delay: calc(var(--speed) * 2);
}

.glow {
  font-family: 'Codystar', sans-serif;
  font-size: 1.5rem;
  font-weight: bold;
  -webkit-animation: glow 2s ease-in-out infinite alternate;
  -moz-animation: glow 2s ease-in-out infinite alternate;
  animation: glow 2s ease-in-out infinite alternate;
  margin-top: 1.5vh;
}

@keyframes glow {
  from {
    color: #fff;
    text-shadow: 0 0 10px #00fff2, 0 0 20px #00fff2, 0 0 30px #00fff2,
      0 0 40px #00fff2, 0 0 50px #00fff2, 0 0 60px #00fff2, 0 0 70px #00fff2,
      0 0 90px #00fff2;
  }

  to {
    color: rgb(234, 222, 222);
    text-shadow: 0 0 20px #00fff2, 0 0 30px #00fff2, 0 0 40px #00fff2,
      0 0 50px #00fff2, 0 0 60px #00fff2, 0 0 70px #00fff2, 0 0 80px #00fff2,
      0 1 90px #00fff2;
  }
}

@-webkit-keyframes glow {
  from {
    color: #fff;
    text-shadow: 0 0 10px #00fff2, 0 0 20px #00fff2, 0 0 30px #00fff2,
      0 0 40px #00fff2, 0 0 50px #00fff2, 0 0 60px #00fff2, 0 0 70px #00fff2,
      0 0 90px #00fff2;
  }

  to {
    color: rgb(247, 232, 232);
    text-shadow: 0 0 20px #00fff2, 0 0 30px #00fff2, 0 0 40px #00fff2,
      0 0 50px #00fff2, 0 0 60px #00fff2, 0 0 70px #00fff2, 0 0 80px #00fff2,
      0 1 90px #00fff2;
  }
}

@media (min-width: 1920px) {
  .icon {
    width: 45px;
    height: 45px;
  }

  .trafficLight {
    width: 60px;
    height: 180px;
    padding: 12px 6px;
    -webkit-box-shadow: 0px 0px 7px 0px rgba(97, 97, 97, 1);
    -moz-box-shadow: 0px 0px 7px 0px rgba(97, 97, 97, 1);
    box-shadow: 0px 0px 7px 0px rgba(97, 97, 97, 1);
  }

  .trafficLight span {
    width: 40px;
    height: 40px;
  }
}

I have valited the css with online tools. There is only 1 media query and it´s placed after the regular css. I´ve check with dev tools and see that media query always dictates what it renders. I have never had this problem before