img,
picture {
  width: 100%;
  height: auto;
  display: block;
  mix-blend-mode: multiply;
}

video {
  width: 100%;
  height: auto;
  display: block;
}

/* ----------------
BLEND MODES 
---------------- */
.bg-highlight img,
.bg-highlight picture {
  mix-blend-mode: darken;
}

/* ----------------
OVERRIDES
---------------- */
.no-blend img,
.no-blend picture,
img.no-blend {
  mix-blend-mode: normal;
}

/* ----------------
ZOOM HOVER
---------------- */
.zoom {
  overflow: hidden;
  position: relative;
}

.zoom::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 5px solid var(--highlight);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 1;
}

.zoom:hover::after {
  opacity: 1;
}

.zoom img,
.zoom picture {
  transition: transform 0.4s ease;
}

.zoom:hover img,
.zoom:hover picture {
  transform: scale(1.01);
}

/* ----------------
VIDEO FILL
---------------- */

.zoom video {
  transition: transform 0.4s ease;
}
.zoom:hover video {
  transform: scale(1.01);
}

.corner-brackets-wrapper {
  --corner-size: 50px;
  --corner-thickness: 5px;
  --corner-color: var(--border);
  display: inline-block;
  padding: 16px;

  background:
    linear-gradient(var(--corner-color), var(--corner-color)) top left /
      var(--corner-size) var(--corner-thickness) no-repeat,
    linear-gradient(var(--corner-color), var(--corner-color)) top left /
      var(--corner-thickness) var(--corner-size) no-repeat,
    linear-gradient(var(--corner-color), var(--corner-color)) top right /
      var(--corner-size) var(--corner-thickness) no-repeat,
    linear-gradient(var(--corner-color), var(--corner-color)) top right /
      var(--corner-thickness) var(--corner-size) no-repeat,
    linear-gradient(var(--corner-color), var(--corner-color)) bottom left /
      var(--corner-size) var(--corner-thickness) no-repeat,
    linear-gradient(var(--corner-color), var(--corner-color)) bottom left /
      var(--corner-thickness) var(--corner-size) no-repeat,
    linear-gradient(var(--corner-color), var(--corner-color)) bottom right /
      var(--corner-size) var(--corner-thickness) no-repeat,
    linear-gradient(var(--corner-color), var(--corner-color)) bottom right /
      var(--corner-thickness) var(--corner-size) no-repeat;
}

.profile-photo {
  display: block;
  width: 100%;
  max-width: 388px; /* 420px minus the 16px padding on each side */
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
  mix-blend-mode: normal;
}