html {
  font-size: 62.5%;
}

.carousel-item > img {
  width: 100%;
  height: 100%;
}

.laptop {
}

.product-caption-title, .product-caption-button {
  text-transform: uppercase;
}

.product-caption-button {
  color: white;
  border: 1px solid white;
  padding: 5px 15px;
  cursor: pointer;
  background-color: rgba(0,0,0,0.3);
}

h3 {
  margin-top: 12px;
  font-size: 1.2rem;
}

@media screen and (min-width: 320px) {
  body::before {
    content: "320px";
    font-family: Arial, sans-serif;
    color: green;
    position: fixed;
    top: 0;
    left: 0;
    font-weight: 700;
    margin: 5px;
    font-size: 1rem;
    z-index: 9999;
  }
}

@media screen and (min-width: 480px) {
  body::before {
    content: "480px";
    color: goldenrod;
  }
}

@media screen and (min-width: 576px) {
  body::before {
    content: "576px";
    color: maroon;
  }
}

@media screen and (min-width: 768px) {
  body::before {
    content: "768px";
    color: orange;
  }
}

@media screen and (min-width: 992px) {
  body::before {
    content: "992px";
    color: black;
  }
}

@media screen and (min-width: 1200px) {
  body::before {
    content: "1200px";
    color: red;
  }
}

@media screen and (min-width: 1400px) {
  body::before {
    content: "1400px";
    color: blue;
  }
}

@media screen and (min-width: 1600px) {
  body::before {
    content: "1600px";
    color: gree;
  }
}

@media screen and (min-width: 1800px) {
  body::before {
    content: "1800px";
    color: peru;
  }
}