html {
  width: 100vw;
}

body.light {
  --backgroundColor: #ebebeb;
}

body.dark {
  --backgroundColor: #2d2d2d;
}

/*Selector with [class] to raise specificity from (0,0,1) to (0,1,1) and overwrite semantic-css*/
body[class] {
  background-color: var(--backgroundColor);
}

@media (max-aspect-ratio: 4/3) {
  .element.custom {
    --squareImage: url('/images/event-square.png');
    background-image: var(--squareImage);
  }
}

@media (max-aspect-ratio: 3/4) {
  .element.custom {
    --phoneImage: url('/images/event-phone.png');
    background-image: var(--phoneImage);
  }
}

@media (min-aspect-ratio: 4/3) {
  .element.custom {
    --desktopImage: url('/images/event-desktop.png');
    background-image: var(--desktopImage);
  }
}