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

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

.G8iDN.is-loaded {
  color: var(--color-dark-gray);
  background: var(--color-light-gray);
  padding: 20px 15px 40px 15px;
  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.
 */
._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%);
}

.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;
}