.ads-placeholder {
  display: none;
}

.ads-container {
  padding: var(--space-4);
  background: #ededed;
}

.ads-center {
  justify-content: center;
  align-items: center;
}

@media (min-width: 992px) {
  .ads-desktop {
    display: flex;
  }
}

@media (min-width: 768px) and (max-width: 992px) {
  .ads-tablet {
    display: flex;
  }
}

@media (max-width: 768px) {
  .ads-mobile {
    display: flex;
  }
}

/* The leaderboard under featured article in the home page */
@media (min-width: 1148px) {
  .ads-home-desktop.mid1 {
    display: flex;
  }
}

@media (min-width: 1100px) {
  .ads-home-desktop.mid1 {
    display: flex;
  }
}

.ads-home-desktop.mid,
.ads-category-desktop.mid,
.ads-home-desktop.mid2,
.ads-category-desktop.mid2 {
  margin: 42px 0;
}

.ads-home-desktop.mid3 {
  margin-top: calc(5 * var(--space-11));
}

.ads-home-tablet.mid1,
.ads-home-desktop.mid1,
.ads-home-mobile.mid,
.ads-home-mobile.mid2,
.ads-category-mobile.mid,
.ads-category-tablet.mid,
.ads-category-mobile.mid3 {
  margin-bottom: var(--space-6);
}

.ads-home-tablet.mid2,
.ads-home-tablet.mid3,
.ads-home-mobile.mid1,
.ads-home-mobile.mid3,
.ads-category-desktop.mid1,
.ads-category-tablet.mid2,
.ads-category-mobile.mid1,
.ads-category-mobile.mid2,
.ads-landing-tablet.mid2,
.ads-landing-tablet.mid,
.ads-article-desktop.bottom,
.ads-article-tablet.bottom,
.ads-article-mobile.bottom {
  margin: var(--space-6) 0;
}

.ads-landing-mobile.mid {
  margin-top: var(--space-7);
}

/* .ads-category-tablet.mid {
  margin: -50px 0 var(--space-6) 0;
} */

/* Design right side ad slots in Desktop */

aside.aside-ads-container {
  height: auto;
  width: 300px;
}

aside.aside-ads-container .ad-slot.mid {
  height: auto;
}

.aside-ads-container {
  display: flex;
  flex-direction: column;
  gap: 350px;
  height: 100%;
  justify-content: space-between;
}

aside.aside-ads-container .ads-placeholder {
  gap: 16px;
  flex-grow: 1;
  height: 100%;
}

.aside-ads-container .ad-slot {
  position: sticky;
  top: 162px;
}

.aside-ads-container {
  container-name: aside-ads-container;
  container-type: size;
}

.aside-ads-container .mid-placeholder {
  display: block;
}

@container (min-height: 1000px) {
  .mid1-placeholder {
    display: block;
  }
}
@container (min-height: 1800px) {
  .mid2-placeholder {
    display: block;
  }
}
@container (min-height: 3000px) {
  .mid3-placeholder {
    display: block;
  }
}
@container (min-height: 4200px) {
  .mid4-placeholder {
    display: block;
  }
}
@container (min-height: 5400px) {
  .mid5-placeholder {
    display: block;
  }
}

@container (min-height: 6600px) {
  .mid6-placeholder {
    display: block;
  }
}
@container (min-height: 7800px) {
  .mid7-placeholder {
    display: block;
  }
}
@container (min-height: 9000px) {
  .mid8-placeholder {
    display: block;
  }
}
@container (min-height: 10200px) {
  .mid9-placeholder {
    display: block;
  }
}
@container (min-height: 11400px) {
  .mid10-placeholder {
    display: block;
  }
}
@container (min-height: 12600px) {
  .mid11-placeholder {
    display: block;
  }
}
@container (min-height: 13800px) {
  .mid12-placeholder {
    display: block;
  }
}
@container (min-height: 15000px) {
  .mid13-placeholder {
    display: block;
  }
}
@container (min-height: 16200px) {
  .mid14-placeholder {
    display: block;
  }
}
@container (min-height: 17400px) {
  .mid15-placeholder {
    display: block;
  }
}

@media (max-width: 992px) {
  aside.aside-ads-container {
    display: none;
  }
}

/* Design add slot for mobile and tablet */

.ad-slot-mobile,
.ad-slot-tablet {
  display: flex;
  justify-content: center;
  margin-top: var(--space-8);
  margin-bottom: var(--space-8);
}

@media (min-width: 768px) {
  .ad-slot-mobile {
    display: none;
  }
}

@media (min-width: 992px) {
  .ad-slot-tablet {
    display: none;
  }
}
@media (max-width: 768px) {
  .ad-slot-tablet {
    display: none;
  }
}