.tooltip {
  --tt-width: 200px;
  --tt-height: 250px;
  --tt-columns: 3;
  --tt-rows: 4;
  --tt-bg-color: #f8f8f0;
  --tt-text-color: #333;
  position: absolute;
  pointer-events: none;
  top: 50%;
  left: 50%;
  width: var(--tt-width);
  height: var(--tt-height);
  display: grid;
  grid-template-areas: "tooltip";
}

.tooltip--show {
  opacity: 1;
}

.tooltip__bg {
  grid-area: tooltip;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(var(--tt-columns), 1fr);
  grid-template-rows: repeat(var(--tt-rows), 1fr);
  background: var(--tt-bg-color);
}

.js .tooltip__bg {
  background: transparent;
}

.tooltip__bg div {
  background: var(--tt-bg-color);
  outline: 1px solid var(--tt-bg-color); /* Fixes the gap in FF */
}

.tooltip__content {
  grid-area: tooltip;
  color: var(--tt-text-color);
  position: relative;
  padding: 1rem;
  font-size: 13px;
  display: grid;
  justify-content: space-between;
}

.tooltip__content-title,
.tooltip__content-desc {
  opacity: 0;
}

.tooltip__content-title {
  font-weight: normal;
  margin: 0;
  font-size: 16px;
}

.tooltip__content-meta {
  margin: 0;
}

.tooltip__content-desc {
  margin: auto 0 0 0;
}

@media screen and (min-width: 53em) {
  .tooltip {
    --tt-width: 290px;
    --tt-height: 330px;
  }

  .tooltip__content {
    padding: 2rem;
  }

  .tooltip__content-title {
    font-size: 2rem;
  }
}
/* 

1. yeah make dedicated file and manage major work their 
2. yeah individuals not weights but changes of occurence while randomize afterwards could on each options of varaint or could be a combination 
3. idk make sure their is chance to add other exculsion if needed soo no hardcode
4. yeah simple on off , dont show if it enable or disable on screen
5. name should define what they in them in combination and make sure each combination have some part of each variant both in name and output.
6.just silently apply it 


*/