.stage {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--bg);
  overflow: hidden;
}

.stage::before {
  content: "";
  position: absolute;
  inset: -240px;
  background:
    radial-gradient(980px 720px at 12% 18%, rgba(0, 255, 170, .20), rgba(0, 0, 0, 0) 74%),
    radial-gradient(1120px 860px at 88% 82%, rgba(242, 201, 76, .16), rgba(0, 0, 0, 0) 76%),
    radial-gradient(820px 620px at 72% 22%, rgba(0, 255, 170, .10), rgba(0, 0, 0, 0) 78%);
  filter: blur(68px);
  pointer-events: none;
  z-index: 0;
}

.canvas {
  position: relative;
  z-index: 1;
  width: 100vw;
  height: calc(100vh - var(--footerH)) !important;
  display: grid;
  gap: var(--gap);
  padding: var(--gap);
  grid-template-columns: 1fr 1fr 1fr 320px;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "top top top ads"
    "bottom bottom bottom ads";
}

.row-top {
  grid-area: top;
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(4, 1fr);
}

.row-bottom {
  grid-area: bottom;
  display: grid;
  gap: var(--gap);
  grid-template-columns: 1.55fr 1fr;
  align-items: stretch !important;
  height: 100% !important;
  min-height: 0 !important;
}

.indicators-card {
  grid-column: 1;
  align-self: stretch !important;
}

.row-market-news {
  grid-column: 2;
  display: grid !important;
  gap: var(--gap) !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 1fr 1fr !important;
  height: 100% !important;
  min-height: 0 !important;
  align-self: stretch !important;
  align-items: stretch !important;
}

.row-market-news > .card {
  height: 100% !important;
  min-height: 0 !important;
  align-self: stretch !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.row-market-news > .card > .content {
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

.ads-col {
  grid-area: ads;
  display: flex;
  min-width: 0;
  background: transparent !important;
  pointer-events: none;
}

.ads-col:empty {
  min-height: 1px;
}

.ads-col .ad-float,
.ads-col ins,
.ads-col iframe {
  pointer-events: auto;
}

.ads-card {
  position: sticky;
  top: var(--gap);
  height: calc(100vh - (var(--gap) * 2));
}

@media (min-width: 1400px) {
  .canvas {
    grid-template-columns: 320px 1fr 1fr 1fr 320px;
    grid-template-areas:
      "adsL top top top adsR"
      "adsL bottom bottom bottom adsR";
  }

  .ads-left {
    grid-area: adsL;
  }

  .ads-col:not(.ads-left) {
    grid-area: adsR;
  }
}

@media (max-width: 1399px) {
  .ads-left {
    display: none;
  }
}

@media (max-width: 1300px) {
  .canvas {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "top top top"
      "bottom bottom bottom"
      "ads ads ads";
    height: auto;
    min-height: 100vh;
  }

  .ads-card {
    position: static;
    height: auto;
  }

  .ad-slot {
    height: 250px;
  }
}