@media (prefers-color-scheme: dark) {
  /* Dark theme styles go here */
  :root {
    --blue: #0096c6;
    --apricot: #fba55a;
    --beige: #ffe7c3;
    --main: var(--apricot);
  }
}

@media (prefers-color-scheme: light) {
  /* Light theme styles go here */
  :root {
    --blue: #0096c6;
    --apricot: #fba55a;
    --beige: #ffe7c3;
    --main: var(--blue);
  }
}

footer ion-icon {
  color: var(--main);
}

.dates {
  li:not(:last-child):after {
    background: var(--main);
  }
}

.bands {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  width: 100%;
}

.band {
  margin: 0.2rem;
}

.band-img {
  opacity: 0.8;
}

/* Mobile | Portrait */
@media only screen and (orientation: portrait) {
  .band-img {
    max-width: 100%;
  }
}

/* Desktop | Landscape */
@media only screen and (orientation: landscape) {
  .band {
    /* flex-basis: 25%; */
    width: 45%;
  }

  .band-img {
    max-width: 100%;
  }
}

@media (hover: hover) and (pointer: fine) {
  .band a {
    &:hover,
    &:focus {
      background: none;
    }

    &:visited {
      &:hover,
      &:focus {
        background: none;
      }
    }
  }
  .band-img:hover {
    opacity: 1;
  }
}