/* ========================================================= */
/* Images
/* ========================================================= */

img { height: auto; }
.cover { object-fit: cover; height: 100%; width: 100%; object-position: center center; } /* use with img */


/* ========================================================= */
/* Aspect ratios
/* ========================================================= */

.ar-og { aspect-ratio: 1200 / 630; }

/* ========================================================= */
/* Interactions
/* ========================================================= */

.pointer { cursor: pointer; }
.pointerEventsNone { pointer-events: none; }

/* ========================================================= */
/* Overflow
/* ========================================================= */

.ofHidden { overflow: hidden; }
.ofXHidden { overflow-x: hidden; }

.ofAuto { overflow: auto; }

.ofScroll { overflow: scroll; }
.ofYScroll { overflow-y: scroll; }

/* ========================================================= */
/* Z-index
/* ========================================================= */

.z1  { z-index: 1; }
.z2  { z-index: 2; }
.z3  { z-index: 3; }
.z4  { z-index: 4; }
.z5  { z-index: 5; }
.z6  { z-index: 6; }
.z-1 { z-index: -1; }

/* ========================================================= */
/* Focus
/* ========================================================= */

:focus-visible {
  outline: 2px solid var(--black);
  outline-offset: 3px;
}
footer :focus-visible {
  outline: 2px solid var(--white);
}

/* ========================================================= */
/* Shadow hover
/* ========================================================= */

.shadowHover:hover {
  box-shadow: var(--s1) var(--s1) 0 0 rgba(35,31,32,0.1);
}