/* Mobile devices (0 to 320px) */
@media screen and (min-width: 0px) and (max-width: 526px) {

  /* Mobile styles */
  .red-sticker-hover-container {
    top: calc(50% - 11rem) !important;
  }
  .yellow-sticker-hover-container {
    top: calc(50% + 3rem) !important;
    left: calc(50% - 5rem) !important;
  }
  .blue-sticker-hover-container {
    top: calc(50% + 3rem) !important;
    right: calc(50% - 5rem) !important;
  }
  .red-sticker {
    width: 185px !important;
  }
  .red-sticker-gif {
    width: 185px !important;
  }
  .yellow-sticker {
    width: 150px !important;
  }
  .yellow-sticker-gif {
    width: 150px !important;
  }
  .blue-sticker {
    width: 150px !important;
  }
  .blue-sticker-gif {
    width: 150px !important;
  }
}

/* Tablets and small laptops (576px to 769px) */
@media screen and (min-width: 527px) and (max-width: 768px) {

  /* Tablet styles */
  .red-sticker-hover-container {
    top: calc(50% - 15rem) !important;
  }
  .yellow-sticker-hover-container {
    top: calc(50% + 7rem) !important;
    left: calc(50% - 9rem) !important;
  }
  .blue-sticker-hover-container {
    top: calc(50% + 7rem) !important;
    right: calc(50% - 9rem) !important;
  }
  .red-sticker {
    width: 275px !important;
  }
  .red-sticker-gif {
    width: 275px !important;
  }
  .yellow-sticker {
    width: 250px !important;
  }
  .yellow-sticker-gif {
    width: 250px !important;
  }
  .blue-sticker {
    width: 250px !important;
  }
  .blue-sticker-gif {
    width: 250px !important;
  }
}

@media screen and (min-width: 769px) and (max-width: 1600px) {

  /* Extra large desktop styles */
  .red-sticker-hover-container {
    top: calc(50% - 17rem) !important;
  }
  .yellow-sticker-hover-container {
    top: calc(50% + 10rem) !important;
    left: calc(50% - 18rem) !important;
  }
  .blue-sticker-hover-container {
    top: calc(50% + 10rem) !important;
    right: calc(50% - 18rem) !important;
  }
  .red-sticker {
    width: 325px !important;
  }
  .red-sticker-gif {
    width: 325px !important;
  }
  .yellow-sticker {
    width: 300px !important;
  }
  .yellow-sticker-gif {
    width: 300px !important;
  }
  .blue-sticker {
    width: 300px !important;
  }
  .blue-sticker-gif {
    width: 300px !important;
  }
}

/* Extra large desktops (1600px and above) */
@media screen and (min-width: 1600px) {

  /* Extra large desktop styles */
  .red-sticker-hover-container {
    top: calc(50% - 20rem) !important;
  }
  .yellow-sticker-hover-container {
    top: calc(50% + 13rem) !important;
    left: calc(50% - 20rem) !important;
  }
  .blue-sticker-hover-container {
    top: calc(50% + 13rem) !important;
    right: calc(50% - 20rem) !important;
  }
  .red-sticker {
    width: 425px !important;
  }
  .red-sticker-gif {
    width: 425px !important;
  }
  .yellow-sticker {
    width: 400px !important;
  }
  .yellow-sticker-gif {
    width: 400px !important;
  }
  .blue-sticker {
    width: 400px !important;
  }
  .blue-sticker-gif {
    width: 400px !important;
  }
}