redbadger/website-honestly

@value badgerWhite, badgerBlack, cainYellow from "../../../css/_colors.css";
@value largeScreen, containerMaxWidth from "../../../css/_sizes.css";

.mbpSlice {
  composes: boldSansSerif from '../../../css/typography/_fonts.css';
  background-color: #2e2e2e;
  font-size: 24px;
  position: relative;
  line-height: 1.25em;
  padding: 94px 78px;
  color: badgerWhite;
  composes: dividerWhite from '../../../css/_divider.css';
}

.mbpSlice::before,
.mbpSlice::after {
  background-color: #2e2e2e;
}

.mbpSlice__wrapper {
  margin: auto;
  width: 100%;
  max-width: containerMaxWidth;
}

.mbpSlice__Content {
  position: relative;
}

.mbpSlice__Content svg {
  width: 168px;
  margin-left: -35px;
  margin-bottom: 32px;
}

.mbpSlice__Content a {
  text-decoration: none !important;
  padding: 8px 20px;
  font-size: 24px;
  cursor: pointer;
  display: block;
  position: relative;
  margin-top: 30px;
  color: badgerBlack !important;
  background: linear-gradient(220deg, transparent 6%, cainYellow 7%);
  height: 56px;
  width: 196px;
  border: none;
  line-height: 40px;
  outline: none;
}

.mbpSlice__Content a:hover {
  background: linear-gradient(220deg, transparent 6%, #988d1a 7%);
}

.mbpSlice__bgShapes {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.mbpSlice__bgShapes img {
  position: absolute;
}

.mbpSlice__shape01 {
  width: 24px;
  right: 10px;
  top: 132px;
}

.mbpSlice__shape02 {
  width: 30px;
  top: 149px;
}

.mbpSlice__shape03 {
  width: 80px;
  right: 0;
  top: 43px;
}

.mbpSlice__shape04 {
  width: 44px;
  bottom: 28px;
}

.mbpSlice__shape05 {
  width: 30px;
  right: 19px;
  bottom: 54px;
}

.mbpSlice__bgTriangle {
  display: none;
}

@media largeScreen {
  .mbpSlice__bgShapes {
    display: none;
  }

  .mbpSlice__Content {
    max-width: 740px;
  }

  .mbpSlice__wrapper {
    display: flex;
    align-items: center;
  }

  .mbpSlice {
    padding: 0;
    font-size: 30px;
  }

  .mbpSlice__bgTriangle {
    display: block;
    width: 30%;
    margin: 46px 40px 46px 0;
  }
}