/* =====================================================
   UNIVERSAL AQI SECTION
   FIXED RESPONSIVE HEIGHT
===================================================== */

/* =========================
   BASE
========================= */

.universalaqi {
  width: 100%;
  overflow: hidden;
  position: relative;
  background: #ffffff;
}

.universalimage {
  width: 100%;
  position: relative;
  line-height: 0;
}

/* =========================
   IMAGE WRAPPERS
========================= */

.universallaptopimage,
.universalmobileimage {
  width: 100%;
  position: relative;
}

/* =========================
   COMMON IMAGE STYLE
========================= */

.universallaptopimage img,
.universalmobileimage img {
  width: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* =====================================================
   MOBILE DEFAULT
===================================================== */

.universalmobileimage {
  display: block;
}

.universallaptopimage {
  display: none;
}

/* IMPORTANT:
   Restrict mobile height
   Remove extra bottom white space
*/

.universalmobileimage img {
  width: 100%;
  height: auto;
  max-height: 720px;
  object-fit: cover;
}

/* =========================
   SMALL MOBILE
========================= */

@media (max-width: 480px) {

  .universalmobileimage img {
    width: 100%;
    height: auto;

    /* FIX EXTRA SPACE */
    max-height: 620px;

    object-fit: cover;
    object-position: top center;
  }
}

/* =========================
   LARGE MOBILE
========================= */

@media (min-width: 481px) and (max-width: 767px) {

  .universalmobileimage img {
    width: 100%;
    height: auto;

    /* CONTROL HEIGHT */
    max-height: 760px;

    object-fit: cover;
    object-position: center top;
  }
}

/* =====================================================
   TABLET + LAPTOP + DESKTOP
===================================================== */

@media (min-width: 768px) {

  /* Show desktop image */
  .universallaptopimage {
    display: block;
  }

  /* Hide mobile image */
  .universalmobileimage {
    display: none;
  }

  .universallaptopimage img {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
  }
}

/* =========================
   LARGE DESKTOP
========================= */

@media (min-width: 1440px) {

  .universallaptopimage img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
}