/*!**********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/fast-css-loader/lib/index.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./blocks/component/now-playing/style.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************************/
/* Bootstrap */
/* Vendors */
.c--now-playing {
  padding: var(--spacers-sm);
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(22.5px);
  -webkit-backdrop-filter: blur(22.5px);
  border: 0;
  z-index: 5;
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px) {
  .c--now-playing {
    width: clamp(500px * var(--min-font-size-controler), 28.901734104 * 1vw, 500px * var(--max-font-size-controler));
    padding: var(--spacers-sm);
  }
}
.c--now-playing__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  gap: var(--spacers-xs);
}
@media (max-width: 767.98px) {
  .c--now-playing__inner {
    gap: var(--spacers-xs);
  }
}
.c--now-playing__poster {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: clamp(100px * var(--min-font-size-controler), 5.7803468208 * 1vw, 100px * var(--max-font-size-controler));
  -ms-flex-item-align: start;
      align-self: flex-start;
}
@media (max-width: 559.98px) {
  .c--now-playing__poster {
    display: none !important;
  }
}
.c--now-playing__poster .ratio {
  border: 1px solid #575757;
}
.c--now-playing__cnt {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
  min-width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: var(--spacers-sx);
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.c--now-playing__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: var(--spacers-sx);
}
.c--now-playing__genre {
  color: #d00426;
  font-size: var(--text-sm);
  line-height: var(--text-sm-line-height);
  letter-spacing: var(--text-sm-letter-spacing);
  font-weight: 700;
  font-family: "trade-gothic-next-condensed", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  text-transform: uppercase;
  margin: 0;
  padding: 0;
  list-style: none;
}
.c--now-playing__genre li {
  display: inline;
}
.c--now-playing__title {
  color: #ffffff;
  font-size: var(--title-lg);
  line-height: var(--title-lg-line-height);
  letter-spacing: var(--title-lg-letter-spacing);
  font-family: "trade-gothic-next-condensed", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  text-transform: uppercase;
  margin: 0;
  line-height: 0.9;
}
.c--now-playing__info {
  margin: 0;
  margin-top: var(--spacers-sx);
}
.c--now-playing__showtimes {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: var(--spacers-xxs);
}
.c--now-playing__actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: var(--spacers-sxx);
  margin-top: var(--spacers-sx);
}
.c--now-playing__actions .c--now-playing__btn {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  min-width: auto;
}
@media (min-width: 768px) {
  .c--now-playing__actions .c--now-playing__btn--learn {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    min-width: auto;
  }
}
.c--now-playing__btn {
  background-color: var(--btn-bg-color) !important;
  border: 1px solid var(--btn-border-color) !important;
  color: var(--btn-color) !important;
  font-size: var(--input-btn-font-size) !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  font-family: "trade-gothic-next-compressed", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
  padding: var(--input-btn-padding-y) var(--input-btn-padding-x) calc(var(--input-btn-padding-y) + 1px) var(--input-btn-padding-x) !important;
  text-decoration: none !important;
  position: relative;
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
  text-transform: uppercase;
  min-width: clamp(158px * var(--min-font-size-controler), 9.1329479769 * 1vw, 158px * var(--max-font-size-controler));
  letter-spacing: clamp(0.4px * var(--min-font-size-controler), 0.0231213873 * 1vw, 0.4px * var(--max-font-size-controler));
}
@media (hover: hover) {
  .c--now-playing__btn:hover {
    background: var(--btn-bg-color-hover) !important;
    border-color: var(--btn-border-color-hover) !important;
    color: var(--btn-color-hover) !important;
  }
  .c--now-playing__btn:hover::after {
    -webkit-filter: var(--btn-filter-hover) !important;
            filter: var(--btn-filter-hover) !important;
  }
}
.c--now-playing__last-chance {
  z-index: 10;
  width: clamp(300px * var(--min-font-size-controler), 17.3410404624 * 1vw, 300px * var(--max-font-size-controler));
  margin-left: clamp(-150px * var(--min-font-size-controler), -8.6705202312 * 1vw, -150px * var(--max-font-size-controler));
  top: 0;
  left: 25px !important;
}