/* @TODO: figure out how the 4-5 different types of ads will share which styles */

.ad-G8iDN {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;

  /* Never allow ads to create horizontal scroll */
  max-width: 100%;
  overflow: hidden;
}

.ad-G8iDN.is-loaded {
  color: var(--color-dark-gray);
  background: var(--ad-background-color, var(--color-light-gray));
  padding: 20px 0 40px 0;
  margin: 20px auto;
  margin: var(--margin, 20px auto);
  overflow: hidden;
}

/**
 * Custom Sizes (AMP-style) ads are setting inline styles (boo)
 * and breaking the layout. Set this on a container instead.
 */
.breakoutContainer-8fsaw {
  /**
   * Container breaking trick
   * 1. Be the width of the screen
   * 2. Position relative pushes it 50% the width of the screen over
   * 3. TranslateX pulls in 50% the width of the element back
   * 4. We're full-width now. Profit!
   */

  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  clear: both;
}

.ad-G8iDN.is-loaded::before {
  content: "Advertisement";
  font-family: var(--font-sans);
  display: block;
  height: 20px;
  text-align: center;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/**
 * During a reload (e.g., resized the browser
 * The gray loaded styling will vanish for a split second
 * but the creative persists.
 */
.ad-G8iDN:not(.is-loaded) > * {
  display: none;
}

@media print {
  .breakoutContainer-8fsaw {
    display: none;
  }
}