mediaquery.css

/* Extra Small Devices  */
/* (phones (phones)) -CSS rules for extra small screens */
@media (max-width: 575.98px) {
  .btn-overlay-cs {
    letter-spacing: 3px;
    font-size: 0.6rem;
  }
  #toastfooter {
    position: fixed;
    bottom: 0;
    padding: 0;
  }
  .main-container-home-cards-hero {
    height: 40vh;
  }

  .carousel-home-cards-hero {
    height: -moz-max-content;
    height: max-content;
  }
  .container-icons-colors a {
    display: inline-block;
  }

  .container-icons-colors span {
    display: inline-block;
    margin: 0;
    padding: 0;
  }
}

/* Small Devices */
/* (tablets (tablets)) -CSS rules for small screens */
@media (min-width: 576px) and (max-width: 767.98px) {
  #cartButton {
    margin-bottom: -10px;
  }
  .btn-overlay-cs {
    letter-spacing: 7px;
    font-size: 1rem;
  }
  #toastfooter {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 20px 0;
  }
  .main-container-home-cards-hero {
    height: 45vh;
  }

  .carousel-home-cards-hero {
    height: -moz-max-content;
    height: max-content;
  }
  .container-icons-colors span {
    display: inline-block;
    margin: 0;
    padding: 0;
  }
}

@media (min-width: 768px) {
  #containeritems {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Medium Devices  */
/* ( (laptops, desktops)) -CSS rules for medium screens */
@media (min-width: 768px) and (max-width: 991.98px) {
  #toastfooter {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 20px 0;
  }
  .main-container-home-cards-hero {
    height: 45vh;
  }

  .carousel-home-cards-hero {
    height: -moz-max-content;
    height: max-content;
  }
  .container-icons-colors span {
    display: inline-block;
    margin: 0;
    padding: 0;
  }
}

/* Large Devices  */
/* (desktops (desktops)) -CSS rules for large screens */
@media (min-width: 992px) and (max-width: 1199.98px) {
  #toastfooter {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 20px 0;
  }
  .main-container-home-cards-hero {
    height: 55vh;
  }

  .carousel-home-cards-hero,
  .carousel-inner {
    height: -moz-fit-content;
    height: fit-content;
  }
}

/* Extra Large Devices  */
/* (extra-large desktops (large desktops, TVs)) -CSS rules for extra-large screens */
@media (min-width: 1200px) and (min-height: 1080px) {
  #toastfooter {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 20px 0;
  }
  .main-container-home-cards-hero {
    height: 60vh;
  }

  .carousel-home-cards-hero,
  .carousel-inner {
    height: -moz-fit-content;
    height: fit-content;
  }
}