.mosaique_grille {
  display: grid;
  gap: 15px;
  grid-template-columns: 1fr;

  @media (min-width: 576px) {
    grid-template-columns: repeat(2, 1fr);

    .item2 {
      grid-column-start: 2;
      grid-row: span 2 / 2;
    }

    .item4 {
      grid-column-start: 1;
      grid-row: span 2 / 2;
      grid-row-start: 4;
    }
  }

  @media (min-width: 992px) {
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(8, 95px);
    gap: 15px;

    .item1 {
      grid-column: span 2 / span 2;
      grid-row: span 4 / span 4;

      img {
        padding: 80px !important;
      }
    }

    .item2 {
      grid-row: span 4 / span 4;
      grid-column-start: 3;

      img {
        padding: 0px !important;
      }
    }

    .item3 {
      grid-row: span 5 / span 5;
      grid-column-start: 4;
    }

    .item4 {
      grid-row: span 3 / span 3;
      grid-column-start: 5;
    }

    .item5 {
      grid-row: span 4 / span 4;
      grid-column-start: 1;
      grid-row-start: 5;

      img {
        padding: 0px !important;
      }
    }

    .item6 {
      grid-column: span 2 / span 2;
      grid-row: span 4 / span 4;
      grid-column-start: 2;
      grid-row-start: 5;

      img {
        padding: 80px !important;
      }
    }

    .item7 {
      grid-row: span 3 / span 3;
      grid-column-start: 4;
      grid-row-start: 6;
    }

    .item8 {
      grid-row: span 5 / span 5;
      grid-column-start: 5;
      grid-row-start: 4;
    }
  }

  .mosaique__item {
    position: relative;
    transition: all var(--transition);
    overflow: hidden;

    &:before {
      content: '';
      position: absolute;
      height: 100%;
      width: 100%;
      transition: all var(--transition);
      z-index: 3;

      @media (min-width: 992px) {
        opacity: 0;
      }
    }


    &:after {
      content: '';
      background-repeat: no-repeat;
      background-size: auto 90%;
      background-position: center center;
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: 0;
      left: 0;
      top: 0;
      transition: transform ease-out 0.3s;
    }

    &.tomates, &.tomatoes, &.pomodori {
      &:after {
        background-image: url('../../img/pattern_tomate.svg');
      }

      @media (min-width: 992px) {
        &:hover {
          &:after {
            background-image: url('../../img/pattern_tomate2.svg');
          }
        }
      }
    }

    &.courgettes, &.squash, &.zucchine, &.zucchina, &.calabacines {
      &:after {
        background-position: center 25% !important;
        background-image: url('../../img/pattern_courgette.svg');
        background-size: auto 90% !important;

        @media (max-width: 991px) {
          background-position: center 15% !important;
          background-size: auto 85% !important;
        }
      }

      @media (min-width: 992px) {
        &:hover {
          &:after {
            background-position: center 40% !important;
            background-image: url('../../img/pattern_courgette2.svg');
          }
        }
      }
    }

    &.melons, &.meloni, &.melón, &.melones {
      &:after {
        background-position: center 45% !important;
        background-image: url('../../img/pattern_melon.svg');
        background-size: 85%;

        @media (min-width: 992px) {
          background-size: auto 75% !important;
        }
      }

      @media (min-width: 992px) {
        &:hover {
          &:after {
            background-position: center 60% !important;
            background-size: auto 75% !important;
            background-image: url('../../img/pattern_melon2.svg');
          }
        }
      }
    }

    &.radis, &.radishes, &.ravanello, &.rabanos {
      &:after {
        background-image: url('../../img/pattern_radis.svg');

        @media (max-width: 991px) {
          background-size: auto 80% !important;
        }
      }

      @media (min-width: 992px) {
        &:hover {
          &:after {
            background-image: url('../../img/pattern_radis2.svg');
          }
        }
      }
    }

    &.aubergines, &.eggplants, &.melanzane, &.berenjenas {
      &:after {
        background-image: url('../../img/pattern_aubergine.svg');

        @media (min-width: 992px) {
          background-size: auto 70% !important;
        }
      }

      @media (min-width: 992px) {
        &:hover {
          &:after {
            background-image: url('../../img/pattern_aubergine2.svg');
          }
        }
      }
    }

    &.laitues, &.lettuces, &.lattughe, &.lechugas {
      &:after {
        background-image: url('../../img/pattern_laitue.svg');
      }

      @media (min-width: 992px) {
        &:hover {
          &:after {
            background-image: url('../../img/pattern_laitue2.svg');
          }
        }
      }
    }

    &.choux, &.cauliflowers, &.cavoli, &.coles { 
      &:after {
        background-size: auto 90% !important;
        background-image: url('../../img/pattern_chouxfleur.svg');
      }

      @media (min-width: 992px) {
        &:hover {
          &:after {
            background-image: url('../../img/pattern_chouxfleur2.svg');
          }
        }
      }
    }

    &.haricots, &.beans, &.fagioli, &.judías {
      &:after {
        background-image: url('../../img/pattern_haricots.svg');
        background-size: 85%;
        background-position: center 40%;

        @media (min-width: 992px) {
          background-size: auto 75% !important;
         
        }
      }

      @media (min-width: 992px) {
        &:hover {
          &:after {
            background-size: auto 75% !important;
            background-image: url('../../img/pattern_haricots2.svg');
          }
        }
      }
    }

    /* &.before_red {
            &:before {
                background: linear-gradient(0deg, rgba(218, 56, 41, 1) 0%, rgba(240, 240, 240, 0) 100%);
            }
        } */


    &.before_yellow {
      &:before {
        background: linear-gradient(0deg, rgba(248, 201, 56, 1) 0%, rgba(240, 240, 240, 0) 100%);
      }
    }

    &.before_greendark1 {
      &:before {
        background: linear-gradient(0deg, rgba(0, 65, 44, 1) 0%, rgba(240, 240, 240, 0) 100%);
      }
    }

    &.before_greendark2 {
      &:before {
        background: linear-gradient(0deg, rgba(0, 95, 54, 1) 0%, rgba(240, 240, 240, 0) 100%);
      }
    }

    &.before_lightgreen {
      &:before {
        background: linear-gradient(0deg, rgba(174, 222, 50, 1) 0%, rgba(240, 240, 240, 0) 100%);
      }
    }

    &.before_orange {
      &:before {
        background: linear-gradient(0deg, rgba(255, 143, 0, 1) 0%, rgba(240, 240, 240, 0) 100%);
      }
    }

    &.before_violet {
      &:before {
        background: linear-gradient(0deg, rgba(109, 29, 61, 1) 0%, rgba(240, 240, 240, 0) 100%);
      }
    }

    @media (max-width: 576px) {
      &:before {
        opacity: 1;
      }

      .mosaique__item_content {

        .titre_produit,
        .description_produit {
          opacity: 1;
        }
      }
    }

    .mosaique__item_content {
      position: absolute;
      transform: translateY(-30%);
      z-index: 5;
      bottom: 2%;
      padding: 0px 40px;

      @media (min-width: 992px) and (max-width: 1399px) {
        padding: 0px 20px;
      }

      @media (min-width: 1400px) {
        bottom: 6%;
        padding: 0px 40px;
      }

      .titre_produit {
        text-transform: uppercase;
        font-family: var(--title-font-hdp);
        margin-bottom: 10px !important;
      }

      .titre_produit,
      .description_produit {
        color: var(--white);
        transition: all var(--transition);
        margin: 0;

        @media (min-width: 992px) {
          opacity: 0;
        }
      }

      .description_produit {
        font-size: 14px;
      }
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      transition: all var(--transition);
      position: relative;
      z-index: 1;
      padding: 80px;

      @media (min-width: 576px) and (max-width: 991px) {
        padding: 40px;
      }

      @media (min-width: 992px) {
        padding: 30px;
      }
    }

    @media (min-width: 992px) {
      &:nth-child(even) {
        &:hover {
          img {
            transform: rotate(40deg);
          }
        }
      }

      &:nth-child(odd) {
        &:hover {
          img {
            transform: rotate(-40deg);
          }
        }
      }

      &:hover {
        &:before {
          opacity: 1;
        }

        .titre_produit,
        .description_produit {
          opacity: 1;
        }


        .title_link {
          color: var(--red);
        }

        &:after {
          transform: rotate(10deg);
        }
      }
    }
  }

  .title_link {
    position: absolute;
    bottom: 0px;
    right: 0px;
    margin: 0;
    color: var(--dark);
    background-color: var(--cream);
    border-radius: 10px 0px 0px 0px;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: var(--medium);
    z-index: 10;
    padding: 10px 15px;

    @media (min-width: 1200px) {
      padding: 10px 20px;
    }
  }
}