:root {
  --ad-width: 728px;
  --ad-height: 90px;
  --ads-padding: 12px;
}

.ads-div {
  box-sizing: border-box;
  width: 100%; 
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--ads-padding);
  gap: 12px;
  overflow: hidden; 
}

.ads-div > ins,
.ads-div > .ad-content,
.ads-div > .ad-iframe {
  width: 100% !important;
  height: auto !important;
  max-width: 100%;
  display: block;
  border: 0;
  margin: 0;  
}

.ads-div[data-preserve="true"] > iframe,
.ads-div[data-preserve="true"] > ins,
.ads-div[data-preserve="true"] > .ad-content,
.ads-div[data-preserve="true"] > .ad-iframe,
.ads-div.preserve-size > iframe,
.ads-div.preserve-size > ins,
.ads-div.preserve-size > .ad-content,
.ads-div.preserve-size > .ad-iframe {
  width: var(--ad-width) !important;
  height: var(--ad-height) !important;
  max-width: none;
  margin: 0 auto; 
}

.ads-div:empty {
  min-height: 24px;
}

@media (max-width: 1024px) {
  :root {
    --ad-width: 468px;
    --ad-height: 60px;
  }
}

@media (max-width: 600px) {
  :root {
    --ad-width: 320px;
    --ad-height: 50px;
    --ads-padding: 8px;
  }
}

.ads-div.leaderboard { --ad-width: 728px; --ad-height: 90px; }
.ads-div.medium-rectangle { --ad-width: 300px; --ad-height: 250px; }
.ads-div.mobile-banner { --ad-width: 320px; --ad-height: 50px; }