style.scss

$color-1: #cdb4db; //Mobile
$color-2: #fff1e6; // Tablet
$color-3: #52b788; // Laptop
$color-4: #bee1e6; // Desktop

$mobile: 576px;
$tablet: 768px;
$laptop: 992px;
$desktop: 1600px;

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;

  body {
    font-family: sans-serif;
    font-size: 35px;
  }
}

.container {
  height: 100vh;
  display: grid;
  place-content: center;
}

#size {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translateX(-50%);
  color: red;
}

@media (max-width: $desktop) {
  .container {
    background-color: $color-4;
  }
}

@media (max-width: $laptop) {
  .container {
    background-color: $color-3;
  }
}

@media (max-width: $tablet) {
  .container {
    background-color: $color-2;
  }
}

@media (max-width: $mobile) {
  .container {
    background-color: $color-1;
  }
}