.subscription-banner-container {
  background-position: center;
  color: var(--baseFg);
  padding: 50px;
}

.subscription-banner-container .banner-label {
  background-color: var(--main);
  font-size: 14px;
  font-weight: 500;
  border-radius: 5px;
  background-size: cover;
  white-space: nowrap;
}

.subscrition-container {
  display: flex;
  gap: 34px;
  padding: 50px;
}

.subcription-item {
  background-color: var(--baseFg);
  padding: 10px 20px;
  border-radius: 10px;
  padding-bottom: 30px;
  position: relative;  
  min-height: 287px;
  min-width: 254px;
}

.subcription-item h3 {
  font-size: 20px;
  font-weight: 800;
}

.subcription-item a.change-subscription {
  padding-bottom: 10px;
  padding-left: 0;
  border-bottom: 0;
  font-size: 14px;
  font-weight: 700;
  background: transparent;
  border-radius: 0;
  color: var(--grayscale-900);
  position: absolute;
  bottom: 20px;
}
.subcription-item a.change-subscription:hover::after{
  bottom: 4px;
  
}
.subcription-item a.change-subscription::after{
  content:"";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--main);
  transition: all .3s ease-in-out;
}
.subcription-item a.change-subscription:hover{
  background-color: transparent;
}
.subcription-item a.added_to_cart.wc-forward{
  display: block;
  color:var(--main);
  margin-top: 5px;
}


.button.change-subscription.loading::before {
  content: '';
  position: absolute;
  bottom: 13px;
  left: calc(100% - 10px);
  color: var(--main);
  width: 15px;
  aspect-ratio: 4;
  background: radial-gradient(circle closest-side,var(--main) 90%,#0000) 0/calc(100%/3) 100% space;
  clip-path: inset(0 100% 0 0);
  animation: l1 1s steps(4) infinite;
}

@keyframes l1 {to{clip-path: inset(0 -34% 0 0)}}