@import 'variables';

#carbonads {
  display: flex;
  justify-content: center;
  margin-top: 6rem;

  a {
    border: none;
  }

  #carbon-cover {
    font-family: $font-family;

    .carbon {

      &-reveal,
      &-large-image {
        border-radius: 3px;
      }

      &-tagline {
        font-weight: 400;
        max-inline-size: 18ch;
      }

      &-cta {
        font-weight: 500;
        color: $black;
      }

      &-footer {

        button,
        .carbon-share {
          visibility: hidden;
        }

        .carbon-via {
          color: $gray-400;
        }
      }
    }
  }

  #carbon-responsive {
    font-family: $font-family;

    a {
      color: $black;
    }

    .carbon-responsive-wrap {
      background-color: $white;
      border-color: $gray-200;
      border-radius: 3px;
    }
  }
}

.darkmode-active {
  #carbonads {
    #carbon-cover {

      .carbon-footer {

        .carbon-via {
          color: $gray-300;
        }
      }
    }

    #carbon-responsive {
      .carbon-responsive-wrap {
        background-color: $black;
        border-color: $black;
      }

      a {
        color: $gray-100;
      }
    }
  }
}

.ads-secondary {

  #carbonads {
    margin-top: 2rem;
  }
}