I have an HTML/CSS widget that can be integrated anywhere on a website. This widget is responsive and have the following rules for mobile:

@media screen and (max-width: 768px) {
  .bstfbt__price-cta--desktop {
    display: none;
  }

  .bstfbt__price-cta--mobile {
    align-self: center;
  }

  .bstfbt__price-cta--mobile > div {
    align-items: center;
  }
}

@media screen and (min-width: 768px) {
  .bstfbt__price-cta--mobile {
    display: none;
  }
}

I also want these rules to apply on desktop when the parent container where the widget is placed on is small.

How should I proceed?