.fullscreen-slider {
  position: fixed;
  inset: 0;
  z-index: 20;
  width: 100vw;
  overflow: hidden;
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}

.slide.active {
  opacity: 1;
}

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

.slider-track {
  position: relative;
  width: 100%;
  height: 100%;
}

.fullscreen-slider::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.35),
    rgba(0,0,0,0.65)
  );
}

/* ========================================
   TABLET
======================================== */

@media (max-width: 768px) {

  .fullscreen-slider {
    height: 55vh;
    min-height: 420px;
    position: relative;
    width: 100vw;
    left: 0;
    margin: 0;
    border-radius: 0;
  }

}

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

@media (max-width: 480px) {

  .fullscreen-slider {
    height: 42vh;
    min-height: 320px;
    position: relative;
    width: 100vw;
    left: 0;
    margin: 0;
    border-radius: 0;
  }

  .slide img {
    object-position: center;
  }

}


/* ========================================
   FORCE FULLWIDTH MOBILE/TABLET
======================================== */

@media (max-width: 768px) {

  .fullscreen-slider,
  .slider-track,
  .slide,
  .slide img {

    width: 100vw !important;
    max-width: 100vw !important;

    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }

}