#ocmContainer {
  
  button.period {
    font-family: "Archivo", sans-serif;
    font-weight: 500;
    font-variation-settings: "wdth" 62.5;
    color: var(--billing-color-0);
    background-color: var(--billing-bcg-color-0);
  }

  button.period:hover { background-color: var(--billing-bcg-color-1)!important; color: var(--billing-color-1)!important; }
  button.period.jedan { background-color: var(--billing-bcg-color-1); color: var(--billing-color-1); }

  .premium-no-adds,
  .paket,
  .foot { 
      background-color: var(--card-bcg-color-2);
      border: 1px solid var(--card-border-color);

      &:has(.mjesecno),
      &:has(.dvogodisnje) {
          background-color: var(--card-bcg-color-2);
      }
  }

  .premium { 
      background-color: var(--card-bcg-color);
      border: 1px solid var(--card-border-color);

      &:has(.mjesecno),
      &:has(.dvogodisnje) {
          background-color: var(--card-bcg-color-2);
      }
  }

  .sve-ponude {
    .premium { 
        background-color: var(--card-bcg-color);
    }

    .premium-no-adds, 
    .premium, 
    .paket {
      .img-dodatak {
        height: 4px;
        margin-block: 0;
      }
    }
  
    .paket-dodatak { 
      margin-block: -26px 16px;
    }
  
  }

  &.page--daruj-pretplatu,
  &.poklon-pretplata_page {

      .premium-no-adds, 
      .premium, 
      .paket, 
      .foot {
          color: var(--txt-color);
      }

    .step {
      background: var(--step-bcg);

      .to-do {
        .triangle {
          background-color: var(--invert-txt-color);
        }

        p.sto {
          color: var(--invert-txt-color);
          font-weight: 400;
        }
      }

      h1 {
        font-family: var(--title-font);
        color: var(--step-number-color);
        font-weight: 800;
        font-variation-settings: "wdth" 62.5;
      }
    }
  }

  .landing-dvg {
    background-color: var(--card-bcg-color);
  }

  .triangle {
    background-color: var(--button-and-link);
  }

  .vrsta-pretplate h1 {
      font-family: var(--title-font);
      font-weight: 500;
      font-style: italic;
      font-variation-settings: "wdth" 62.5;
      color: #808080;

      span {
          color: var(--button-and-link);
      }
  }

  .landing-kartice {
    .vrsta-pretplate { 
        h1 {
            background-color: var(--card-period-bcg-color);
            color: var(--card-period-color); 
        }
    }

    .paket {
        .vrsta-pretplate h1 {
            &.zagrada {
                font-variation-settings: "wdth" 80;
                font-weight: 600;
            }
        }
    }

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

  .premium-no-adds, 
    .premium, 
    .paket {
      .img-dodatak {
        height: 40px;
        margin-block: 0;
      }
    }

  .sve-ponude {
    .premium-no-adds, 
    .premium, 
    .paket {
      .img-dodatak {
        height: 4px;
        margin-block: 0;
      }
    }

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

  }

  h3 { 
      font-family: var(--explanations-font);
  }


  .paket-dodatak h3.bold {
      font-family: var(--subtitles-font);
      line-height: 1.2;
      font-size: 15px;
      letter-spacing: 0.2px;
  }

  .nabrajanje-velika {
      margin-block: 10px 30px;
  }

  .nabrajanje-velika h3 {
      font-family: var(--explanations-font-bold-italic);
      font-size: 22px;
      line-height: 14px; 
  }

  .nabrajanje h4,
  .nabrajanje-velika h4 {
      font-family: var(--price-font);
  }

  .nabrajanje-velika h4 {
      font-weight: 400;
      font-variation-settings: "wdth" 62.5;
      
  }

  &.page--daruj-pretplatu,
  &.poklon-pretplata_page {
      .nabrajanje-velika h4 {
          color: var(--button-and-link);
      }
  }

  .nabrajanje h4 {
      font-variation-settings: "wdth" 75;
  }

  .nabrajanje.bez-oglasa {
      background-image: linear-gradient(to right, #ffffff 50%, #ffffff00 0%);
  }

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

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

      .nabrajanje-velika span.linethtough-price {
          font-size: 70%;
          }
      
  .linethtough-price-gray,
  .gray {
      color: #BDBEC3;
  }

  h4.bf-price {
      margin-block: 2rem;
      color: var(--button-and-link);
  }

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

  .nabrajanje h3 {
      color: #eeeeee;
  }

  .nabrajanje h3.bold {
      font-family: var(--explanations-font-bold-italic); 
  }

  .addon-text .nabrajanje h3::before {
      background: var(--invert-txt-color);
  }

  button.pretplatite-se {
      font-family: var(--button-font);
      color: var(--btn-txt-color);
      background-color: var(--button-and-link);
      text-transform: uppercase;
      font-weight: 400;
      letter-spacing: 2.5px;
      width: 80%;
  }

  button.pretplatite-se a { color: var(--btn-txt-color); }


  button.pretplatite-se:hover {
      color: var(--txt-color);
      background-color: var(--button-hover);
      opacity: 1;

      a { color: var(--btn-txt-color); }
  }

  a button.pretplatite-se:hover {
      color: var(--txt-color);
      background-color: var(--button-hover);
      opacity: 1;
  }

  .footer.kartice {
      background: var(--bcg-color);
  }

  .foot-text {  
      color: var(--invert-txt-color);  

      h1 {
          font-family: var(--title-font);
          font-weight: 700;
          font-variation-settings: "wdth" 72;  
          }

      h2 {
          font-family: var(--subtitles-font);
          }

      button.pretplatite-se {
          background-color: var(--foot-button);
      }

      .icon-monitor,
      .icon-tablet,
      .icon-newspaper {
          background-color: var(--invert-txt-color);
      }
  } 

          
  @media (min-width: 1024px) {

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

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

    .landing-kartice {
      .img-dodatak {
          height: 50px;
      }
    }

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

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

      .pomak {
        height: 16px;
      }

  }


  @media (min-width: 1280px) {

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

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

        h3 {
          padding-inline: 5px;
          padding-block: 5px 0;
        }
      }

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

    }

  }

}