/*!*****************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/pricing-block/style.scss ***!
  \*****************************************************************************************************************************************************************************************************************************************************/
/* Responsive Queries
========================================================= */
/* Media Breakpoints
========================================================= */
/* Between Breakpoints
========================================================= */
/* Color VARs
========================================================= */
/* Color VARs (values defined in theme.json)
========================================================= */
/* Fonts (fonts defined in theme.json)
========================================================= */
/* EM to PX
========================================================= */
/* REM to PX
========================================================= */
/* BG Image
========================================================= */
/* Padding - Global Rows
========================================================= */
/* Easing
======================================================== */
/* Global Transition ( property, duration, easing )
========================================================= */
/* Font Awesome 5 ( needs content specified )
========================================================= */
/* Clamp Dynamic Resize
========================================================= */
/* Additional Helper Mixins
========================================================= */
/* Button ( color, background, border )
========================================================= */
/* Box Shadow
========================================================= */
/* Caret Links
========================================================= */
/* Tag
========================================================= */
/* Headers and Presets
========================================================= */
.vooks-block .pricing-monthly {
  font-family: var(--wp--preset--font-family--header);
  line-height: 1.2;
  font-weight: 800;
  font-size: clamp(1.75rem, 1.375rem + 0.78125vw, 1.875rem);
}

.vooks-block .pricing-annual, .vooks-block .pricing-strike, .vooks-block .pricing-title {
  font-family: var(--wp--preset--font-family--header);
  font-size: 1.5rem;
  line-height: 1.2;
}

.vooks-block.pricing-block {
  background-color: #fff;
  color: var(--wp--preset--color--gray);
  border: 5px solid #f0f1f2;
  padding: 1em;
  border-radius: 40px;
  text-align: center;
  position: relative;
  transition: border 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #555259;
  height: 100%;
}
.vooks-block.pricing-block.tag {
  border-color: var(--wp--preset--color--yellow);
}
.vooks-block .pricing-block-image img {
  display: block;
  margin: 25px auto;
}
.vooks-block .pricing-title {
  font-family: var(--wp--preset--font-family--alt);
  color: var(--wp--preset--color--blue);
  margin-bottom: 0;
}
.vooks-block .pricing-strike {
  font-family: var(--wp--preset--font-family--body);
}
.vooks-block .pricing-monthly {
  color: var(--wp--preset--color--blue-dark);
  margin: 20px 0;
}
.vooks-block .pricing-annual {
  font-family: var(--wp--preset--font-family--alt);
  color: var(--wp--preset--color--gray);
  margin-bottom: 20px;
  font-weight: 700;
}
.vooks-block .pricing-tag {
  position: absolute;
  top: 50px;
  right: -8px;
  background-color: var(--wp--preset--color--red);
  color: var(--wp--preset--color--white);
  padding: 10px;
  padding-left: 30px;
  border-radius: 5px 0 0 5px;
  font-size: 1.5rem;
  font-weight: 700;
  font-family: var(--wp--preset--font-family--alt);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 15px 50%);
          clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 15px 50%);
}
@media only screen and (max-width: 480px) {
  .vooks-block .pricing-tag {
    font-size: 0.75rem;
    padding-left: 20px;
  }
}

/*# sourceMappingURL=style-index.css.map*/