/* =========================================================
   FOCAL POINT SYSTEM
   Cinematic Responsive Framing
========================================================= */



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

.focal-media {
  width: 100%;
  height: 100%;

  object-fit: cover;

  object-position:
    center center;
}



/* =========================================================
   HORIZONTAL FOCUS
========================================================= */

.focal-left {
  object-position:
    left center;
}

.focal-left-soft {
  object-position:
    35% center;
}

.focal-center {
  object-position:
    center center;
}

.focal-right-soft {
  object-position:
    65% center;
}

.focal-right {
  object-position:
    right center;
}



/* =========================================================
   VERTICAL FOCUS
========================================================= */

.focal-top {
  object-position:
    center top;
}

.focal-top-soft {
  object-position:
    center 35%;
}

.focal-bottom-soft {
  object-position:
    center 65%;
}

.focal-bottom {
  object-position:
    center bottom;
}



/* =========================================================
   CORNER FOCUS
========================================================= */

.focal-top-left {
  object-position:
    left top;
}

.focal-top-right {
  object-position:
    right top;
}

.focal-bottom-left {
  object-position:
    left bottom;
}

.focal-bottom-right {
  object-position:
    right bottom;
}



/* =========================================================
   RESPONSIVE OVERRIDES
   Optional cinematic reframing
========================================================= */

@media (max-width: 980px) {

  .focal-mobile-center {
    object-position:
      center center;
  }

  .focal-mobile-top {
    object-position:
      center 20%;
  }

  .focal-mobile-bottom {
    object-position:
      center 80%;
  }

  .focal-mobile-right {
    object-position:
      75% center;
  }

  .focal-mobile-left {
    object-position:
      25% center;
  }

}