:root {
  --banner-height-top: 8%;
  --banner-height-bottom: 12%;
  --default-background-color: #dcbfdf80;
  --default-contrasting-color: whitesmoke;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.banner {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.banner--top {
  height: var(--banner-height-top);
  background-color: var(--default-contrasting-color);
}

.banner--bottom {
  height: var(--banner-height-bottom);
  background-color: var(--default-background-color);
}

.board {
  width: 100%;
  height: calc(100% - var(--banner-height-top) - var(--banner-height-bottom));
  background-color: var(--default-background-color);
  position: relative;
  overflow: hidden;
}

.card {
  max-width: calc(100% - 8px);
  max-height: calc(100% - 8px);
  background-color: var(--default-contrasting-color);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  border-radius: 12px;
  transform: translateX(-50%) translateY(-50%) scale(0.95);
}