:root {
  --photo-width: 320px;
}

main {
  min-height: 50vh;
  text-align: center;
  align-content: center;
  padding: 1em;
}

.meter-stack {
  position: relative;
  padding: 0 1em;
  meter {
    position: absolute;
    inset: 0;
    appearance: none;
    background: transparent;
    outline: 1px solid white;
    outline-offset: 2px;
    border-radius: 4px;

    &::-moz-meter-bar {
      background: none;
      backdrop-filter: saturate(0%) invert(100%) brightness(200%);
    }
  }
}

@media (width >= 780px) {
  :root {
    --photo-width: 640px;
  }
}

@media (width >= 1280px) {
  :root {
    --photo-width: 1024px;
  }
}

img.photograph {
  width: var(--photo-width);
  height: auto;
}