@charset "UTF-8";
/* Mixins
================================================== */
/* Breakpoints
================================================== */
/*
320px – very small phones (old iPhones, edge cases)

375px – modern iPhone width (very common)

450px – large phones / Pro Max

768px – iPad portrait

1024px – iPad landscape

1280px – common laptop

1440px – large monitors

1920px – full HD (usually max-width, not layout change)









*/
/* Images
================================================== */
figure {
  border: none;
  padding: 0;
  display: inline-block;
  margin: 1em 0;
}

img {
  max-width: 100%;
  height: auto;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
  pointer-events: none;
  aspect-ratio: attr(width)/attr(height);
}

* {
  /*

  		image-rendering: -moz-crisp-edges;         // Firefox
  		image-rendering:   -o-crisp-edges;         // Opera
  		image-rendering: -webkit-optimize-contrast; // Webkit (non-standard naming)
  		image-rendering: crisp-edges;
  		-ms-interpolation-mode: nearest-neighbor;  //
  */
}

/* Prevent people stealing images
================================================== */
img {
  pointer-events: none;
}

img {
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-user-select: none;
          user-select: none;
  pointer-events: none;
}

/* lazy load
================================================== */
.rocket-lazyload {
  opacity: 0;
  transition: opacity 1s;
}
.rocket-lazyload.lazyloaded {
  opacity: 1;
}

/* Parralax - no supported on touch screens
========================================================== */
@media (hover: hover) {
  .parralax-image {
    background-attachment: fixed;
  }
}
/* Media upload
========================================================== */
.media {
  position: relative;
  overflow: hidden;
}
.media img {
  will-change: transform;
}
.media > * {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  object-fit: cover;
}
.media > * > * {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  object-fit: cover;
}
.media.contain > * {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}
.media.contain > * > * {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}

.media-link {
  background-color: #000;
  overflow: hidden;
}
.media-link .media {
  transition: ease-in-out 0.5s;
  overflow: hidden;
}
.media-link:focus .media, .media-link:hover .media {
  opacity: 0.7;
  transform: scale(1.05);
}