@use '@carbon/styles/scss/colors';
@use "@carbon/styles/scss/spacing";
@use "@carbon/styles/scss/type";

.desktopHeading {
  h4 {
    @include type.type-style("heading-compact-02");
    color: colors.$gray-70;
  }
}

.tabletHeading {
  h4 {
    @include type.type-style("heading-03");
    color: colors.$gray-70;
  }
}

.desktopHeading,
.tabletHeading {
  text-align: left;
  text-transform: capitalize;
  margin-bottom: spacing.$spacing-05;

  h4:after {
    content: "";
    display: block;
    width: 2rem;
    padding-top: 0.188rem;
    border-bottom: 0.375rem solid var(--brand-03);
  }
}

.heading:after {
  content: "";
  display: block;
  width: 2rem;
  padding-top: 0.188rem;
  border-bottom: 0.375rem solid var(--brand-03);
}

.tile {
  padding: 2rem;
}

.layer {
  margin: 1rem 0;
  text-align: center;
  border: 1px solid colors.$gray-20;
}

.content {
  @include type.type-style("heading-compact-02");
  color: colors.$gray-70;
  margin-top: spacing.$spacing-05;
  margin-bottom: spacing.$spacing-03;
}

.explainer {
  @include type.type-style('body-compact-01');
  color: colors.$gray-70;
}