.recepti-background-image {
    width:100%;
    height: 70vh;
    background-image: url(../../images/landscapes/4002.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size:cover;
    background-position: 50%;
    color:white;
  }
  .recepti-main{
    min-width:85%;
      transform: translateY(-70px);
      padding: 40px 50px 30px;
      background-color: #fff;
      border-radius: 20px;
  }
  .recepti-naslov{
    font-weight: bolder;
    top: 35vh;
    position: relative;
    padding: 15px 30px;
    width: fit-content;
    margin: auto;
    border-radius: 15px;
    transform: translateY(-25%);
  }
  .icons-list{
    width:50px;
    margin-left:50%;
    transform: translateX(-50%);
    margin-bottom:20px;
  }
  #arrrow-icon{
    width:20px;
    transform: translateY(-1px);
  }
  .basic-data{
    margin-bottom:10px;
    width: 100%;
    height:40px;
  }
  .basic-data img{
    float:left;
  }
  .basic-data div{
    margin:auto;
  }
  .basic-data .col-6{
    padding:0;
  }
  .basic-icons{
    max-width: 40px;
  }
  @media only screen and (max-width:1000px){
    .col-2,.col-3,.col-7{
      width:100%;
    }
    .basic-data{
      margin-bottom:10px;
      float: left;
      width: 20%;
    }
    .col-2 {
      margin-bottom:50px;
    }
    .col-3 {
      margin-bottom:20px;
    }
  }
  @media only screen and (max-width:900px){
    .recepti-main{
      width: 95%;
      padding: 40px 20px 30px;
    }
  }
  @media only screen and (max-width:750px){
    .basic-data img{
      width:100%;
    }
    .basic-data div{
      width: 100% !important;
      text-align: center;
    }
    .recepti-card{
      width: 100%;
    }
  }
  @media only screen and (max-width:450px){
    h1{
      font-size: 1.5em;
    }
  }
  @media only screen and (max-width:400px){
    h1{
      font-size: 1.2em;
    }
  }