.recipe-carousel {
  .slick,
  .slick-wrapper {
    margin: 0 auto;
    width: calc(100vw - 2 * var(--ilw-margin--side, 1.875rem));
  }

  .slick-dotted.slick-slider {
    margin-bottom: 50px;
  }

  article.recipe.teaser {
    padding: 0 1em;
  }

  .slick-arrow::before {
    color: var(--ems-blue);
    font-size: 1.8rem;
  }

  .slick-dots li button::before {
    color: var(--ems-blue);
  }

  .slick-next {
    @media (width >= 600px){
      right: -3%;
    }
  }

  .slick-prev {
    @media (width >= 600px){
      left: -3%;
    }
  }
}

.recipe-view {
  .row-1 {
    .col-1 {
      max-width: 100%;
      width: auto;

      @media (width >= 600px) {
        max-width: 66.66666667%;
      }

      article.recipe {
        padding: 0 1rem;
      }
    }

    .col-2, .col-3 {
      max-width: 100%;
      width: auto;

      @media (width >= 600px) {
        max-width: 33.3333%;
      }

      article.recipe {
        padding: 0 1rem;
      }
    }
  }

  .row-2, .row-3 {
    .views-col {
      max-width: 100%;
      width: auto;

      @media (width >= 600px) {
        max-width: 33.3333%;
      }

      article.recipe {
        padding: 0 1rem;
      }
    }
  }
}

.recipe-search {
  background-color: var(--ems-yellow);
  padding: 1rem 1rem 0;
  margin-bottom: 2rem;
}

#views-exposed-form-recipes-page-1 {
  .news-form-wrapper {
    display: flex;
    flex-direction: column;

    @media (width >= 600px) {
      flex-flow: row wrap;
      display: flex;
      align-items: flex-end;
    }

    input.button {
      width: inherit;
    }

    input,
    select {
      margin-bottom: 1rem;
      height: 45px;

      @media (width <= 600px) {
        width: 100%;
      }
    }

    .form-item-field-menu-category-target-id {
      display: none;
    }
  }

  .form--inline .form-item {
    float: none;
    width: 100%;

    @media (width >= 600px) {
      float: left;
      width: inherit;
      flex-basis: 0;
      flex-grow: 1;
    }
  }

  .form--inline {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;

    .form-actions {
      clear: none;
    }

  }

  .form-item, .form-actions {
    @media (width >= 600px) {
      margin: 0 .75rem 0 0;
    }
  }

  .form-text {
    margin-top: 0;
  }

  @media print {
    display: none;
  }
}

.recipe-icons {
  display: flex;

  @media (width <= 600px) {
    flex-wrap: wrap;
   justify-content: space-evenly;
  }

  .views-row {
    width: auto;
    padding: 0 .75rem;

    a.recipe-icon {
      background-color: var(--ems-yellow);
      padding: 1em;
      margin: 1em;
      border-radius: .5rem;
      color: var(--il-blue);
      text-decoration: none;
      max-width: 110px;
      height: 168px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      @media (width >= 600px) {
        margin: 0 0 1em;
      }

      img {
        margin-bottom: .5em;

        @media (width >= 600px) {
          margin-bottom: .5em;
        }
      }

      &:hover,
      &.active {
        background-color: var(--il-blue);
        color: var(--ems-yellow);

        img {
          filter: brightness(0) saturate(100%) invert(86%) sepia(23%) saturate(7498%) hue-rotate(350deg) brightness(111%) contrast(103%);
        }
      }
    }
  }

  .views-field-name {
    text-align: center;
    font-weight: 600;
    line-height: 1.45rem;
    margin-top: .5rem;
  }
}

.recipe-intro {
  h2 {
    display: none;
  }
}