@use "../../../styles/int.scss";

.container {
  width: 100%;
  text-align: center;
  display: grid;
  grid-template-areas: "disclaimer"
    "ad";
  grid-template-rows: auto auto;
  justify-content: center;
  overflow: clip;
}

.disclaimer {
  grid-area: disclaimer;
  margin: int.$spacing-1 auto 0;
  text-transform: uppercase;
  color: int.$coolgray-60;

  @include int.sans($size: "100", $role: "label") {
    font-size: 12px;
  }
}

.placeholder {
  grid-area: ad;
  visibility: hidden;
  background-color: int.$coolgray-10;
  margin: 5px auto 0;
  max-width: 100%;

  &.active {
    visibility: visible;
  }

  // Placeholders 
  &.placeholder-banner {
    width: 100%;
    max-width: 600px;
    height: 50px;

    @include int.breakpoint-at-least("sm") {
      height: 90px;
    }
  }

  &.placeholder-banner_btf {
    width: 100%;
    max-width: 600px;
    height: 50px;

    @include int.breakpoint-at-least("sm") {
      height: 90px;
    }
  }

  &.placeholder-mrec-small_btf {
    max-width: 300px;
    width: 100%;
    height: 255px;
  }
}

.mount {
  grid-area: ad;
}