/* ==========================================================================
   Advertisement Styles
   ========================================================================== */

.ad, .widget_ai_ad_widget, .ad-widget-in-content {
  > div {
    max-width: 100%;
  }

  > div > div {
    &:before {
      content: 'Advertisement';
      text-transform: uppercase;
      font-size: 13px;
      font-family: var(--font-ui);
      position: relative;
      display: block;
      text-align: center;
      color: var(--bs-gray-600);
    }
  }

  &-billboard,
  &-leaderboard {
    width: 970px;
    aspect-ratio: 970 / 250;
    height: auto;
    /* background-color: var(--bs-gray-200); */
  }

  &-box {
    width: 300px;
    aspect-ratio: 300 / 250;
    height: auto;
    /* background-color: var(--bs-gray-200); */
  }

  &-tall {
    width: 300px;
    aspect-ratio: 300 / 600;
    height: auto;
    /* background-color: var(--bs-gray-200); */
  }

  &-in-content {
    padding: 1.61803399em 0;
    border-top: 1px solid var(--bs-gray-300);
    border-bottom: 1px solid var(--bs-gray-300);
    clear: both;
  }

  &-content {
    width: 600px;
    aspect-ratio: 600 / 300;
    height: auto;
    /* background-color: var(--bs-gray-200); */
  }

  &-sticky {
    position: sticky;
    top: 7rem;
  }
}