/**
 * Ad slot styles for STATIC HTML pages (cosmetics-ranking.html, etc.).
 *
 * The SPA bundle has its own copy of these rules in `client/src/index.css`;
 * we duplicate them here so the static pages don't depend on the React CSS
 * bundle. Keeping the class names identical means designers can target
 * `.ad-slot` once and the rules apply everywhere.
 */

.ad-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  margin: 1.25rem auto;
  width: 100%;
}

.ad-slot__label {
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(180, 180, 200, 0.65);
}

.ad-slot__frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.02);
  overflow: hidden;
}

.ad-slot__frame iframe {
  display: block;
  border: 0;
}

.ad-slot--banner_300x250 .ad-slot__frame,
.ad-slot--banner_728x90 .ad-slot__frame,
.ad-slot--banner_320x50 .ad-slot__frame {
  width: auto;
}

@media (max-width: 640px) {
  .ad-slot {
    margin: 1rem auto;
  }
  .ad-slot--banner_728x90 {
    display: none;
  }
}

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