#ocmContainer {
  
  .nacin-placanja { 
    margin-block: 40px;
    display: flex;
    justify-content: center;
    gap: 10px;
  }  

  .kartice {
    display: grid;
    width: 100%;
    gap: 30px; 
  }

  button.period {
      font-style: italic;
      text-transform: uppercase;
      text-align: center;
      line-height: 1.4;
      letter-spacing: 0.5px;
      border: 0;
      margin: 0;
      display: inline-block;

      font-size: 16px;
      padding: 11px 17px 6px;
      width: auto;
      }

  button.period:focus { outline: none; }


  .kartica { 
    position: relative;
    width: 100%;
    margin: 0 auto; 
    color: var(--invert-txt-color);
  }

  .premium-no-adds,
  .premium,
  .paket,
  .foot { 
      width: 100%;
      margin: 0 auto;
      padding: 30px 22px 0;
      max-width: 352px;
      color: var(--invert-txt-color);
  }

  &.page--daruj-pretplatu,
  &.poklon-pretplata_page {
    .premium { 
        background-color: transparent;
        width: 100%;
        margin: 0 auto;
        padding: 0;
        border-radius: none;
        border: none;
        max-width: 352px;
    }

    .steps {
      display: grid;
      width: 100%;
      gap: 1.5rem;
      margin-top: 2rem;
      max-width: 36rem;
    }

    .step {
      padding: 3rem 1.5rem;
      width: 100%;
      min-height: 33rem;

      .to-do {
        position: relative;

        p.sto {
          padding: 4px 5px 5px 15px;
          margin-block: 4px;
          line-height: 1.5;
        }

        .triangle {
          top: 6px;
          width: 7px;
        }

        a {
          color: #ffffffef;
        }
      }

      h1 {
        font-size: 70px;
        line-height: 0.9;
        margin-block: 0 3rem;
      }
    }
  }

  .premium-no-adds,
  .premium,
  .paket { 
      .img-dodatak {
        height: 26px;

        &:has(.rokovnik-img) {
          height: 112px;
        }
      }
  }

  .mjesecno,
  .godisnje,
  .dvogodisnje {
      text-align: center;
      position: relative;
  }

  .landing-dvg {
    display: flex;
    width: 352px;
    align-items: center;
    margin-top: 58px;

    .kartica {
      padding: 0;
    }
  }

  .addon {
    position: relative;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 7px;

    .addon-text {
      width: 100%;

      p {
        cursor: pointer;
        padding: 0 0 0 22px;
        text-align: left;
      }
    }
  }

  .triangle {
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
    width: 10px;
    aspect-ratio: 0.595;
    clip-path: shape(from 100% 50%,line by -8% 4.76%,line by -67.94% 40.46%,line to 16.03% 100%,line to 0% 90.46%,line by 8% -4.76%,line to 67.94% 50%,line to 8.03% 14.31%,line to 0% 9.54%,line to 16.03% 0%,line by 8% 4.76%,line by 67.94% 40.46%,line to 100% 50%,close);
    margin-block: 5px 0;
  }

  .nabrajanje { 
    display: none; 
  }

  .paket-dodatak { 
    padding: 0; 
  }

  .god,
  .dvg { display: none; }


  .vrsta-pretplate h1 {
      font-size: 17px;
      line-height: 1.4;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      padding: 7px 0 6px;
      text-align: center;
  }

  .landing-kartice {
    gap: 45px;

    .landing-mj {
      order: 1;
    }
    .landing-god {
      order: 0;
    }
    .landing-pkt-god {
      order: 2;
    }

    .vrsta-pretplate { 
        position: relative;
        padding: 0;
        top: -50px;
        z-index: 3; 
        height: auto;
        width: 100%;
        margin: 0 auto;

        h1 {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            padding: 7px 20px 6px;
        }
    }

    .mjesecno,
    .godisnje,
    .dvogodisnje {
        padding-bottom: 58px;
        }

    .premium-no-adds,
    .premium,
    .paket { 
        height: auto;
    }

    .paket {
        .vrsta-pretplate h1 {
            display: inline-block;
        
            &.zagrada {
                text-transform: none;
                font-size: 25px;
                line-height: 1.1;
                margin-bottom: 7px;
                transform: translateY(-1px);
            }
        }
    }

    button.pretplatite-se {
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
    }

    .nabrajanje {
      button.pretplatite-se {
        position: relative;
        left: unset;
        transform: none;
      }
    }
  }

  .cta-aktiviraj {
    margin-bottom: 0;

    button.pretplatite-se {
      position: relative;
      left: unset;
      bottom: unset;
      transform: none;
      margin-block: 3rem 4rem;
    }
  }

  .sve-ponude {
    .premium-no-adds, 
    .premium, 
    .paket {
      padding: 6px 22px 0;

      .img-dodatak {
        height: 38px;
      }
    }

    .paket-dodatak { 
      margin-block: -10px 16px;
    }
  }

  .paket-dodatak h3 {
    font-size: 14px;
    line-height: 20px;
    padding: 0;
    margin-block: 11px 0;
  }

  .nabrajanje h4,
  .nabrajanje-velika h4 {
      padding: 0; 
  }

  .nabrajanje-velika h4 {
    font-size: 60px;
    line-height: 0.9;
  }

  .nabrajanje h4 {
    display: block;
    font-size: 20px;
    line-height: 1;
    padding: 6px 0 18px;
    margin-bottom: 8px;
  }

  .linethtough-price {
    text-decoration: line-through;
    text-decoration-thickness: 3px;
  }

  .gray {
    color: #BDBEC3;
  }

  .nabrajanje.bez-oglasa .linethtough-price {
    text-decoration-thickness: 2px;
  }

  .nabrajanje:not(.bez-oglasa) {
    padding: 0 20px
  }

  .nabrajanje.bez-oglasa {
      background-image: linear-gradient(to right, black 50%, rgba(255, 255, 255, 0) 0%);
      background-position: bottom;
      background-size: 6px 1px;
      background-repeat: repeat-x;
      margin-bottom: 20px;
  }

  .nabrajanje h3 {
      font-size: 13px;
      line-height: 1.45;
      text-align: left;
      margin-bottom: 0px;
      }

      .nabrajanje h3.bold {
        font-family: 'Georgia Bold Italic', serif; 
      }

      .addon-text .nabrajanje h3::before {
        content: "";
        display: inline-block;
        width: 3px;
        aspect-ratio: 1;
        border-radius: 50%;
        margin: 0 5px 3px 0;
      }

  button.pretplatite-se {
      text-align: center;
      font-size: 18px;
      line-height: 1.2;
      letter-spacing: .5px;
      border: none;
      border-radius: 22px;
      padding: 6px 34px;
      margin: 12px auto 16px auto;
      width: 100%;
      transition: all .2s ease-in-out; 
  }

  button.pretplatite-se:hover { opacity: 0.8; }
  button.pretplatite-se:focus { outline: none; }
  button.pretplatite-se a { color: #ffffff; }

  .nabrajanje {
    button.pretplatite-se {
      margin: 9px auto 12px auto;
    }
  }

  .footer.kartice {
      margin-block: 0 100px;
      gap: 18px;
  }

  .foot-text {
      height: 100%;
      position: relative;
      text-align: center;
      padding-bottom: 22px;
      
      h1 {
          font-size: 29px;
          line-height: 1.2;
          margin-block: 14px 2px;
          }

      h2 {
          font-size: 16px;
          padding: 13px 0 0;
          margin-bottom: 0;
          }

      button.pretplatite-se {
          margin: 0;
      }

      .ikonice {
          margin-block: 88px 12px;
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 12px;
          height: 60px;
      }

      .icon-monitor,
      .icon-tablet,
      .icon-newspaper {
          display: inline-block;
          width: 40px;
          height: 50px;
          padding: 1rem;
          mask-size: 100%;
          mask-repeat: no-repeat;
          mask-position: center;
      }

      .icon-monitor {
          width: 46px;
          height: 40px;
          clip-path: shape(from 12.5% 6.67%,hline by 75%,arc by 6.25% 6.67% of 6.21% 6.7% small cw,vline by 53.33%,arc by -6.25% 6.67% of 6.21% 6.7% small cw,hline by -75%,arc by -6.25% -6.67% of 6.21% 6.7% small cw,vline by -53.33%,arc by 6.25% -6.67% of 6.21% 6.7% small cw,close,move by 75% -6.67%,hline by -75%,arc by -12.5% 13.33% of 12.45% 13.42% small ccw,vline by 53.33%,arc by 12.5% 13.33% of 12.45% 13.42% small ccw,hline by 22.87%,line by -2.09% 13.33%,hline by -11.41%,arc by 0% 6.67% of 3.09% 3.33% large ccw,hline by 56.26%,arc by 0% -6.67% of 3.09% 3.33% large ccw,hline by -11.41%,line by -2.09% -13.33%,hline by 22.87%,arc by 12.5% -13.33% of 12.45% 13.42% small ccw,vline by -53.33%,arc by -12.5% -13.33% of 12.45% 13.42% small ccw,close,move by -29.22% 80%,line by 2.09% 13.33%,hline by -20.74%,line by 2.09% -13.33%,hline by 16.57%,close);
      }
      .icon-tablet {
          width: 37px;
          height: 44px;
          clip-path: shape(from 7.13% 87.5%, arc by 7.13% 6.25% of 7.15% 6.23% small ccw, hline by 71.43%, arc by 7.13% -6.25% of 7.15% 6.23% small ccw, vline by -18.75%, hline by -85.69%, close, move by 0% -25%, hline by 85.71%, vline by -50%, arc by -7.13% -6.25% of 7.15% 6.23% small ccw, hline by -71.43%, arc by -7.13% 6.25% of 7.15% 6.23% small ccw, close, move by -7.13% -50%, arc by 14.29% -12.5% of 14.32% 12.49% small cw, hline by 71.43%, arc by 14.29% 12.5% of 14.32% 12.49% small cw, vline by 75%, arc by -14.29% 12.5% of 14.32% 12.49% small cw, hline by -71.43%, arc by -14.29% -12.5% of 14.32% 12.49% small cw, close, move by 50% 64.06%, arc by -5.35% 4.69% of 5.37% 4.69% large cw, arc by 5.35% -4.69% of 5.35% 4.67% small cw, close);
      }
      .icon-newspaper {
          width: 47px;
          height: 40px;
          clip-path: shape(from 31.25% 7.14%,arc by -6.25% 7.14% of 6.24% 7.14% small ccw,vline by 71.43%,arc by -1.68% 7.14% of 12.26% 14.05% small cw,hline by 61.05%,arc by 9.37% -10.71% of 9.37% 10.73% small ccw,vline by -67.86%,arc by -6.25% -7.14% of 6.24% 7.14% small ccw,close,move by -18.75% 85.71%,arc by 6.25% -7.14% of 6.24% 7.14% small ccw,vline by -71.43%,arc by 12.5% -14.29% of 12.5% 14.31% small cw,hline by 56.25%,arc by 12.5% 14.29% of 12.5% 14.31% small cw,vline by 67.86%,arc by -15.62% 17.86% of 15.6% 17.87% small cw,hline by -71.88%,arc by -12.5% -14.29% of 12.5% 14.31% small cw,vline by -67.86%,arc by 6.25% 0% of 3.12% 3.57% small cw,vline by 67.86%,arc by 6.25% 7.14% of 6.24% 7.14% small ccw,close,move by 56.24% -60.71%,arc by 3.12% -3.57% of 3.13% 3.59% small cw,hline by 9.37%,arc by 0% 7.14% of 3.12% 3.57% large cw,hline by -9.37%,arc by -3.12% -3.57% of 3.13% 3.59% small cw,close,move by 0% 14.29%,arc by 3.12% -3.57% of 3.13% 3.59% small cw,hline by 9.37%,arc by 0% 7.14% of 3.12% 3.57% large cw,hline by -9.37%,arc by -3.12% -3.57% of 3.13% 3.59% small cw,close,move by -34.37% 14.29%,arc by 3.12% -3.57% of 3.13% 3.59% small cw,hline by 43.75%,arc by 0% 7.14% of 3.12% 3.57% large cw,hline by -43.74%,arc by -3.12% -3.57% of 3.13% 3.59% small cw,close,move by 0% 14.29%,arc by 3.12% -3.57% of 3.13% 3.59% small cw,hline by 43.75%,arc by 0% 7.14% of 3.12% 3.57% large cw,hline by -43.74%,arc by -3.12% -3.57% of 3.13% 3.59% small cw,close,move by 9.37% -32.14%,hline by 12.5%,vline by -14.29%,hline by -12.5%,close,move by -6.25% -16.07%,arc by 4.7% -5.36% of 4.67% 5.35% small cw,hline by 15.62%,arc by 4.69% 5.36% of 4.67% 5.35% small cw,vline by 17.86%,arc by -4.7% 5.36% of 4.67% 5.35% small cw,hline by -15.61%,arc by -4.69% -5.36% of 4.67% 5.35% small cw,close);
      }

  } 


  @media (min-width: 350px) {
      button.period {
          display: inline-block;
      }
  }                       
              
  @media (min-width: 576px) {
    .kartica { max-width: 456px; }
  }
          
  @media (min-width: 768px) { 

      .nabrajanje-velika h4 {
          font-size: 62px;
      }

      .paket-dodatak h3 {
        margin-block: 15px 0;
      }
  }
          
  @media (min-width: 1024px) {
    .mjesecno,
    .godisnje,
    .dvogodisnje {
      height: 100%;
      padding-bottom: 0;
      }

    .premium-no-adds,
    .premium,
    .paket { 
        .img-dodatak {
            height: 16px;
        }
    }

    .landing-kartice {

      .landing-mj, 
      .landing-god, 
      .landing-pkt-god {
        order: unset;
      }
      
      .img-dodatak {
          height: 78px;
      }

      .premium-no-adds, 
      .premium, 
      .paket {
          height: auto;
          max-width: 100%;
      }
    }

    &.page--daruj-pretplatu,
    &.poklon-pretplata_page {
      .landing-kartice {
        .img-dodatak {
            height: 112px;
        }
      }

      .steps {
        grid-template-columns: repeat(4, 1fr);
        width: 1000px;
        max-width: unset;

        .step {
          padding: 3rem 1.5rem;
          width: unset;
        }
      }
    }

      .addon {
        margin-bottom: 5px;
      }

      .pomak {
        height: 34px;
      }

      .premium-no-adds, 
      .premium, 
      .paket,
      .foot  {
        padding: 50px 22px 4px; 
        height: 100%;
        max-width: 100%;
      }

      .sve-ponude {
        .premium-no-adds, 
        .premium, 
        .paket {
          padding: 11px 22px 52px; 

          .img-dodatak {
            height: 62px;
          }
        }

        .paket-dodatak { 
          margin-block: -60px 0;
        }
      }

      .foot {
          max-width: 360px;
      }

      .kartice { 
        grid-template-columns: repeat(auto-fit, minmax(10%, 300px)); 
        justify-content: center;
        gap: 22px; 
      }

      &.page--daruj-pretplatu,
      &.poklon-pretplata_page {
        .kartice { 
          grid-template-columns: repeat(auto-fit, minmax(10%, 402px)); 
        }
      }

      button.period { 
          margin: 10px 0 16px 0; 
          letter-spacing: 2.5px;
          font-size: 17px;
          padding: 9px 0 7px;
          width: 150px;
      }
    
      .paket-dodatak  { 
          padding: 0 8px; 
          font-size: 14px;
          line-height: 20px; 
        }

      .dvg-pretplate {
          gap: 45px;
      }

    .kartica { 
      max-width: 100%; 
      margin: 0 auto; 
    }

    .landing-dvg {
      width: 376px;
      margin-top: 62px;
    }

    .nacin-placanja { 
      margin-block: 30px 36px;
      gap: 20px;
    } 


    .landing-kartice {
      .vrsta-pretplate { 
        top: -70px;
        height: auto;
        width: 100%;
        margin: 0 auto; 
        position: relative; 
        }
      .vrsta-pretplate h1 { 
        left: 50%;
        transform: translateX(-50%);
        padding: 7px 20px 6px;
      }
    }


    button.pretplatite-se { 
      padding: 6px 34px;
      position: absolute;
      left: 50%;
      bottom: -12px;
      transform: translateX(-50%);
    }

    &.page--daruj-pretplatu,
    &.poklon-pretplata_page {
      button.pretplatite-se { 
        padding: 11px 34px;
        border-radius: 28px;
      }
    }

    &.page--daruj-pretplatu {
      button.pretplatite-se { 
        font-size: 26px;
      }
    }

    &.poklon-pretplata_page {
      button.pretplatite-se {
        font-size: 22px;
        margin-block: 7rem;
      }
    }

    .cta-aktiviraj {
      margin-bottom: 12;
    }

    .nabrajanje {
      button.pretplatite-se {
        position: relative;
      }
    }

    .foot {
      max-width: unset;
      padding: 50px 22px 45px;
    }

    .footer.kartice {
      margin-block: 0 100px;
      gap: 56px;
    }

  }


  @media (min-width: 1280px) {

    .nabrajanje-velika h4 {
      font-size: 70px;
    }

    .kartice { 
      grid-template-columns: repeat(auto-fit, minmax(10%, 376px)); 
      gap: 40px;
    }

    &.page--daruj-pretplatu,
    &.poklon-pretplata_page {
      .kartice { 
        grid-template-columns: repeat(auto-fit, minmax(10%, 402px)); 
      }

      .steps {
        grid-template-columns: repeat(4, 1fr);
        width: 1245px;
      }
    }

    .premium-no-adds, 
    .premium, 
    .paket,
    .foot {
      margin-bottom: 18px;
    }

    .foot {
      margin-bottom: 17px;
      padding: 20px 22px 42px;
    }

    .footer.kartice {
      margin-block: 0 125px;
    }

    .foot-text {
      h2 {
          padding: 18px 0 0;
      }
      .ikonice {
        margin-block: 90px 16px;
      }
    }

    .landing-kartice {
      .nabrajanje, 
      .paket-dodatak {
        padding: 0;
      }

      .nabrajanje {
        h3 {
          padding-left: 22px;
        }
      }

      .pogodnosti {
        + .nabrajanje {
          margin-top: 10px;
        }
      }

      .paket-dodatak.mob {
        bottom: 15px;
      }
    }

    &.page--daruj-pretplatu,
    &.poklon-pretplata_page {
      .landing-kartice {
        .nabrajanje, .paket-dodatak {
          padding: 0;
  
          h3 {
            padding-left: 0;
          }
        }
      }
    }

  }

  @media (min-width: 1600px) {

    .kartice { 
      gap: 60px;
    }
  }
}