/*!*****************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/sass-resources-loader/lib/loader.js??ruleSet[1].rules[0].use[3]!./template-parts/block-promocije-hero-banner/block-promocije-hero-banner.scss ***!
  \*****************************************************************************************************************************************************************************************************************************************************/
.banner-promocije {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 450px;
  position: relative;
  max-width: 1920px;
  width: 100%;
  margin: 0 auto;
  padding: 120px 0 24px; }
  .banner-promocije h1 {
    line-height: 135%;
    letter-spacing: unset; }
  .banner-promocije::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    max-width: 1400px;
    width: 100%;
    height: 100%;
    background: linear-gradient(178.98deg, #fff 43.86%, rgba(255, 255, 255, 0) 65.95%);
    transform: matrix(-1, 0, 0, 1, 0, 0);
    pointer-events: none; }
    @media screen and (max-width: 640px) {
      .banner-promocije::before {
        display: none; } }
  .banner-promocije::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 250px;
    left: 0;
    top: 0;
    background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0) 100%); }
  @media screen and (max-width: 640px) {
    .banner-promocije {
      height: auto;
      max-height: none;
      min-height: 550px;
      padding: 120px 0 40px; } }
  @media screen and (min-width: 640px) {
    .banner-promocije {
      padding: 140px 0 24px; }
      .banner-promocije::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(246.82deg, #fff 50.91%, rgba(255, 255, 255, 0) 73.33%);
        transform: matrix(-1, 0, 0, 1, 0, 0);
        pointer-events: none; } }
  @media screen and (min-width: 1440px) {
    .banner-promocije {
      padding: 120px 0 24px 106px; } }
  @media screen and (min-width: 1921px) {
    .banner-promocije {
      padding: 6.25vw 0 1.25vw 5.52vw;
      max-height: 23.43vw;
      max-width: 100%; }
      .banner-promocije::before {
        max-width: 72.91vw; } }
  .banner-promocije.exipred {
    padding: 80px 0 24px; }
    @media screen and (min-width: 1440px) {
      .banner-promocije.exipred {
        padding: 80px 0 50px 106px; } }
    @media screen and (min-width: 1921px) {
      .banner-promocije.exipred {
        padding: 4.1666666666666666666666666666667vw 0 2.0833333333333333333333333333333vw 5.5208333333333333333333333333333vw; } }
    .banner-promocije.exipred .banner-promocije__expired-overlay {
      display: block; }
    .banner-promocije.exipred .banner-promocije__expired-note {
      display: flex; }
  .banner-promocije .banner__image img {
    min-width: 1000%;
    min-height: 1000%;
    max-width: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.1001);
    transition: 350ms ease;
    object-fit: cover;
    object-position: right; }
    @media screen and (max-width: 640px) {
      .banner-promocije .banner__image img {
        object-position: unset; } }

.banner-promocije__wrap {
  position: relative;
  z-index: 2;
  max-width: 900px;
  padding: 0 24px;
  width: 100%; }
  @media screen and (min-width: 1921px) {
    .banner-promocije__wrap {
      max-width: 46.875vw;
      padding: 0 1.25vw; } }
  @media screen and (max-width: 1200px) {
    .banner-promocije__wrap {
      max-width: 640px; } }
  @media screen and (max-width: 640px) {
    .banner-promocije__wrap {
      margin-top: -120px; } }
  @media screen and (max-width: 576px) {
    .banner-promocije__wrap {
      margin-top: -50px; } }

.banner-promocije__expired-overlay,
.banner-single__expired-overlay {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(29, 29, 29, 0.3);
  mix-blend-mode: multiply;
  z-index: 3;
  pointer-events: none; }

.banner-promocije__expired-note,
.banner-single__expired-note {
  display: none;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 0;
  left: 0;
  min-width: 40%;
  clip-path: polygon(0 0, 95% 0, 100% 100%, 0% 100%);
  height: 50px;
  background-color: #dd4848;
  padding: 24px;
  z-index: 5;
  text-align: center; }
  @media screen and (min-width: 1921px) {
    .banner-promocije__expired-note,
    .banner-single__expired-note {
      height: 2.604166666666667vw;
      padding: 1.25vw; } }
  @media screen and (max-width: 640px) {
    .banner-promocije__expired-note,
    .banner-single__expired-note {
      width: 90%; } }
  .banner-promocije__expired-note span,
  .banner-single__expired-note span {
    color: #fff;
    font-size: 32px;
    font-weight: 700; }
    @media screen and (min-width: 1921px) {
      .banner-promocije__expired-note span,
      .banner-single__expired-note span {
        font-size: 1.66666vw; } }
    @media screen and (max-width: 991px) {
      .banner-promocije__expired-note span,
      .banner-single__expired-note span {
        font-size: 22px; } }
    @media screen and (max-width: 375px) {
      .banner-promocije__expired-note span,
      .banner-single__expired-note span {
        font-size: 18px; } }