/* The link retains its accessible name; the generated alpha mask supplies the mark. */
.header-container .logo {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: clamp(165px, 20vw, 220px);
  aspect-ratio: 1356 / 172;
  font-size: 0;
  line-height: 0;
}

.header-container .logo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, #fff 0 97%, #b6f4df 97% 100%);
  -webkit-mask-image: url("assets/img/webdev786-logo.png?v=2");
  mask-image: url("assets/img/webdev786-logo.png?v=2");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 160.177% 420.9302%;
  mask-size: 160.177% 420.9302%;
  -webkit-mask-position: 50.2451% 49.4565%;
  mask-position: 50.2451% 49.4565%;
}

.header-container .logo:focus-visible {
  outline: 2px solid #b6f4df;
  outline-offset: 8px;
}