: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;
    width: auto;
    height: auto;
    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%);
    }

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

    &::-webkit-meter-inner-element {
      background: none;
      border-radius: 4px;
      position: relative;
      -webkit-appearance: none;
      appearance: none;
      height: 100%;
      padding: 0;
      contain: strict;
    }

    &::-webkit-meter-bar {
      position: absolute;
      height: 100px;
      appearance: none;
      background: none;
    }

  }
}

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

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

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