.pricingCard__inner{
  display:flex;
  flex-wrap:wrap;
  gap:30px;
}



.pricingCard__col{
  flex:1 0 250px;
}

.pricingCard__item:hover{
  box-shadow:0 0 20px rgba(0,0,0,.05);
}

.pricingCard__img{
  width:42px;
  height:42px;
  border-radius:4px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-bottom:15px;
}

.pricingCard__item h4{
  color:#58595B;
  font-size:23px;
  font-weight:400;
}
.pricingCard__price{
  font-size:28px;
  font-weight:300;
  margin-bottom:25px;
}
.pricingCard__inner.is-toggle .price-yearly{
  display:block;
}
.pricingCard__inner.is-toggle .price-monthly{
  display:none;
}
.price-yearly{
  display:none;
}

.pricingCard__desc{
font-weight:300;
  margin-bottom:50px;
}
.best-offer{
  position:absolute;
  font-size: 15px;
  padding: 8px 15px;
  border-radius: 4px;
  color: #fff;
  transform: rotate(-13deg);
  top: -10px;
  left: -7px;
  font-weight: 300;
}
.best-offer:after{
  content:"";
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 6px 6px 0 6px;
  transform: rotate(0deg);
  position:absolute;
  top:calc(100% - 1px);
  left:0;
  right:0;
  margin:0 auto;
}

.pricingCard__buttons .button{
  display:block;
  color:#fff;
  border-radius:7px;
  text-decoration:none;
  transition:.2s all;
  padding: 13px 30px;
}
.pricingCard__buttons .button:hover{
  transform:scale(1.05);
  filter: brightness(90%);
}

.pricingCard__buttons .link{
  text-decoration:none;
  margin-top:15px;
  display:block;
}
.pricingCard__buttons .link:hover{
  text-decoration:underline;
}

.pricingCard__toggle{
  display:inline-flex;
  margin:0 auto 40px;
  text-transform:uppercase;
  font-size:18px;
  justify-content:center;
  gap:10px;
  position:relative;
}
.pricingCard__toggle:after{
  content:url(https://7081442.fs1.hubspotusercontent-na1.net/hubfs/7081442/MJTW-assets/save-15.svg);
  position:absolute;
  bottom:0;
  left:100%;
}
.pricingCard__toggle .toggle{
  width:44px;
  height:22px;
  border-radius:20px;
  position:relative;
  cursor:pointer;
}
.pricingCard__toggle .toggle:after{
  content:"";
  border-radius:50%;
  position:absolute;
  height: 18px;
  left: 2px;
  position: absolute;
  top: 2px;
  transition: all .2s;
  width: 18px;
}
.pricingCard__toggle.is-toggle .toggle:after{
  left:23px;
}

.procingCard__footnotes{
  text-align:center;
  margin-top:40px;
  font-weight:300;
}

@media (max-width:480px){
  .pricingCard{
    text-align:left;
  }
  .pricingCard__inner{
    text-align:center;
  }