.pageRecipesListPage,
.pageRecipesRangePage {
  padding-bottom: 4.19rem;

  .page-recipes-list-page--featured-recipe {
    position: relative;
    background-color: var(--primary);
  }

  .page-recipes-list-page--featured-recipe-text {
    padding: 1.69rem 0 1.24rem;
  }

  .page-recipes-list-page--featured-recipe-chapo {
    color: var(--white);
    font-family: var(--font-family);
    font-size: 1.8125rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.875rem; /* 103.448% */
    text-transform: uppercase;
  }

  .page-recipes-list-page--featured-recipe-title {
    margin-top: 0.62rem;
    color: var(--background-white);
    font-family: var(--font-family-FiraSans--condensed-semiBold);
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: uppercase;
  }

  .page-recipes-list-page--featured-recipe .component-wrapper-picture--picture-image {
    width: 100%;
    height: 18.75rem;
    object-fit: cover;
    object-position: center;
    
    mask-image: url("../img/mobile-title-2-3aa82e9005aed89e73737b6a1d476b14.webp");
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
    mask-type: alpha;
    mask-position: bottom;
  }

  .pageRecipesListPage--filters {
    background-color: var(--secondary);
    padding: min(20.5vw, 5.5rem) 0 4.06rem;
  }

  .pageRecipesListPage--content {
    margin-top: min(18vw, 4.81rem);
  }

  .pageRecipesListPage--title {
    color: var(--background-white);
    font-family: var(--font-family);
    font-size: 2.25rem;
    font-style: normal;
    font-weight: 400;
    line-height: 2.625rem;
    text-transform: uppercase;
  }

  .pageRecipesListPage--subtitle {
    margin-top: 0.31rem;
    color: var(--background-white);
    font-family: var(--font-family-FiraSans--condensed-semiBold);
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.0375rem;
    text-transform: uppercase;
  }

  .pageRecipesListPage--recipe-count {
    color:  var(--primary);
    font-family: var(--font-family-FiraSans--condensed-medium);
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.045rem;
    text-transform: uppercase;
  }

  .recipes-list {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 2.25rem;
    margin: 1.81rem 0 2.31rem;
  }

  .algolia-recipes-filters--facets {
    display: flex;
    flex-direction: column;
    gap: 1.56rem;
  }

  .algolia-recipes-filters--facets--product-ranges .productRangeslabel {
    display: flex;
    flex-direction: column;
    gap: 0.94rem;
    align-items: center;
  }

  .filters--productRangeslabel-choice {
    display: flex;
    width: 15.8125rem;
    height: 3.125rem;
    padding: 0.9375rem 1.5625rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    border-radius: 4.6875rem;
    background: var(--background-white);
  }

  .filters--productRangeslabel-title {
    color: var(--primary);
    text-align: center;
    font-family: var(--font-family-firaSans);
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 1.5rem */
    text-transform: uppercase;
  }

  .filters--productRangeslabel-choice.checked {
    color: var(--white);
    background-color: var(--primary);
    border: 2px solid var(--white);

    .filters--productRangeslabel-title {
      color: var(--white);
    }
  }

  .filters--radio-input.hidden {
    display: none;
  }

  .algolia-recipes-filters--facets--accordions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.94rem;
  }

  .algolia-recipes-filters--filters {
    margin-top: min(19.15vw, 5.125rem);
    display: flex;
    flex-direction: column;
    gap: 1.56rem;
  }

  .algolia-recipes-filters--accordion {
    position: relative;
    background-color: var(--primary);
    color: var(--white);
    font-family: var(--font-family-firaSans);
    font-size: min(3.73vw, 1rem);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    height: 3.125rem;
    padding: 0.94rem 1rem 0.99rem 0.91rem;
  }

  .algolia-recipes-filters--accordion-title {
    margin-bottom: 0;
    position: relative;
  }

  .algolia-recipes-filters--accordion-title svg {
    display: none;
  }

  .algolia-recipes-filters--accordion-title::after {
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    background-image: var(--dropdown-arrow-background-white);
    width: 1.3125rem;
    height: 1.3125rem;
    background-size: 1.3125rem 1.3125rem;
  }

  .algolia-recipes-filters--accordion-title.rotate-arrow-180::after {
    transform: translateY(-50%) rotate(180deg);
  }

  .algolia-recipes-filters--accordion-content {
    position: absolute;
    top: 3.125rem;
    left: 0;
    right: 0;
    background-color: var(--primary);
    z-index: 1;
  }

  .algolia-recipes-filters--accordion-content .accordion-content-inner {
    padding: 0.47rem 0rem 0.47rem 0rem;
    display: flex;
    flex-direction: column;
    /*gap: 0.94rem;*/
  }

  .filters--option {
    padding: 0.47rem 1rem 0.47rem 0.91rem;
    transition: 0.25s ease;
  }
  .filters--option:has(label:hover),
  .filters--option:has(input[checked]) {
    color: var(--primary);
    background-color: var(--white);
  }

  .filters--option label {
    display: block;
    width: 100%;
  }
  .filters--option input {
    display: none;
  }

  .algolia-recipes-filters--facets--search {
    display: flex;
    justify-content: center;
  }

  .algolia-recipes-filters--facets--search--cta {
    display: flex;
    width: 12.5rem;
    height: 3.125rem;
    padding: 0.9375rem 1.5625rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    flex-shrink: 0;

    border-radius: 4.6875rem;
    background: var(--red);

    color: var(--white);
    text-align: center;
    font-family: var(--font-family-firaSans);
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 1.5rem */
    text-transform: uppercase;
  }
}

@media screen and (min-width: 55rem) /* 840px */ {
  .pageRecipesListPage,
  .pageRecipesRangePage {
    .recipes-list {
      grid-template-columns: repeat(2, 1fr);
      column-gap: 2.25rem;
    }
  }
}

@media screen and (max-width: 63.938rem) /* 1023px */ {
  .pageRecipesListPage,
  .pageRecipesRangePage {
    .algolia-recipes-filters--accordion:nth-of-type(n+3) {
      grid-column: 1 / span 2;
      padding: 0.94rem 2rem 0.99rem 1.9rem;
    }

    .page-recipes-list-page--featured-recipe-cta {
      position: absolute;
      right: 2.69rem;
      bottom: 2.18rem;

      display: inline-flex;
      height: 2.5rem;
      padding: 0.9375rem 1.5625rem;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 0.625rem;
      border-radius: 4.6875rem;
      background: var(--background-white);

      color: var(--primary);
      text-align: center;
      font-family: var(--font-family-FiraSans-medium);
      font-size: 1rem;
      font-style: normal;
      font-weight: 700;
      line-height: 150%; /* 1.5rem */
      text-transform: uppercase;
      z-index: 1;
    }
  }
}

@media screen and (min-width: 64rem) /* 1024px */ {
  .pageRecipesListPage,
  .pageRecipesRangePage {
    padding-bottom: 3.44rem;

    .page-recipes-list-page--featured-recipe {
      background-color: var(--secondary);
    }

    .page-recipes-list-page--featured-recipe::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 70%;
      height: 100%;
      z-index: 1;

      background: linear-gradient(270deg, rgba(0, 0, 0, 0.01) 0%, rgba(0, 0, 0, 0.58) 37.98%, rgba(0, 0, 0, 0.80) 79.33%);
    }

    .page-recipes-list-page--featured-recipe .component-wrapper-picture--picture-image {
      height: 43.8rem;

      mask-image: url("../img/desktop-title-revert-47be7b9ca86ee779a4a36d41d86e5dae.png");
      mask-repeat: no-repeat;
      mask-size: 120% 170%;
      mask-position: center;
      object-position: right;
    }

    .page-recipes-list-page--featured-recipe-text {
      padding: 0;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 2.25rem;
      z-index: 2;
    }

    .page-recipes-list-page--featured-recipe-text .content-width {
      display: flex;
      flex-direction: column;
    }

    .page-recipes-list-page--featured-recipe-cta {
      display: flex;
      height: 4rem;
      padding: 0.9375rem 1.5625rem;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 0.625rem;
      border-radius: 4.6875rem;
      background: var(--white);

      color: var(--primary);
      text-align: center;
      font-family: var(--font-family-FiraSans-medium);
      font-size: 1.25rem;
      font-style: normal;
      font-weight: 700;
      line-height: 150%; /* 1.875rem */
      text-transform: uppercase;

      margin: 2.5rem auto 0 0;
    }

    .page-recipes-list-page--featured-recipe-chapo {
      color: var(--background-white);
      font-size: 4.5rem;
      line-height: 4.625rem; /* 102.778% */
      letter-spacing: -0.135rem;
    }

    .page-recipes-list-page--featured-recipe-title {
      margin-top: 0.38rem;
      color: var(--white);
      font-size: 2rem;
    }

    .pageRecipesListPage--filters {
      padding: 3.75rem 0 10.5rem;
    }

    .pageRecipesListPage--title {
      text-align: center;
      font-family: var(--font-family-tambor);
      font-size: 3.75rem;
      font-weight: 700;
      line-height: normal;
    }

    .pageRecipesListPage--subtitle {
      text-align: center;
      font-size: 2.25rem;
      letter-spacing: normal;
    }

    .algolia-recipes-filters--filters {
      margin-top: 3.12rem;
      max-width: 53.25rem;
    }

    .filters--productRangeslabel-choice {
      width: 100%;
    }

    .algolia-recipes-filters--facets--product-ranges .productRangeslabel {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      column-gap: 1.56rem;
    }

    .algolia-recipes-filters--facets--accordions {
      grid-template-columns: repeat(3, 1fr);
      column-gap: 1.56rem;
    }

    .algolia-recipes-filters--facets--search--cta {
      display: flex;
      width: 15.8125rem;
      height: 4rem;
    }

    .recipes-list {
      margin: 3.81rem 0 3.12rem;
      max-width: 85.375rem;
      column-gap: 3.12rem;
      row-gap: 3.75rem;
    }

    .pageRecipesListPage--recipe-count {
      text-align: center;
    }
  }
}

@media screen and (min-width: 80rem) /* 1280px */ {
  .pageRecipesListPage,
  .pageRecipesRangePage {
    .page-recipes-list-page--featured-recipe::before {
      width: 60%;
    }
    
    .page-recipes-list-page--featured-recipe-text {
      left: 5.25rem;
    }
  }
}

@media screen and (min-width: 90rem) /* 1440px */ {
  .pageRecipesListPage,
  .pageRecipesRangePage {
    .page-recipes-list-page--featured-recipe-text {
      left: 15.25rem;
    }
    .recipes-list {
      grid-template-columns: repeat(3, 1fr);
    }
  }
}