@media only screen and (max-width: 640px) {
    .flexy {
      width: 100%;
      padding: 10px;
      display: block;
    }

    .container_products {
      width: 100% !important;
      max-width: 100% !important;
      display: block;
    }

    .container {
      width: 100%;
    }

    .grids {
      display: grid;
      gap: 4px;
      grid-template-columns: 50% 50%;
    }

    .mobile {
      width: 80% !important;
      margin: 0 auto;
    }

    .singleProduct img {
      width: 100% !important;
      height: 100% !important;
      object-fit: cover;
    }

    .catalog {
      margin-top: 20px;
      width: 200px;
      text-align: center;
    }

    .catalog img {
      width: 200px;
    }

    .image_container {
      width: 100% !important;
    }

    .blackButton {
      width: 100%;
      padding: 3px 5px;
      text-align: center;
      background-color: var(--main-color);
      font-family: KleinBlack;
      border-radius: 4px;
      color: var(--contrast-color);
      font-family: KleinBook;
      border: 0px;
      cursor: pointer;
    }

    .alert {
      width: 100% !important;
    }

    .favorite {
      width: 20px !important;
    }
  }

  @media only screen and (max-width: 880px) {}

  @media only screen and (max-width: 1360px) {}

  @media only screen and (min-width: 768px) and (max-width: 1360px) {
    .flexy {
      width: 75%;
      padding: 10px;
      display: block;
      float: right;
    }

    .container_products {
      width: 100% !important;
      max-width: 100% !important;
      display: block;
    }

    .flexy3 {
      width: 25%;
      float: left;
    }

    .singleList {
      width: 100% !important;
    }

    .grids {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 5px;
    }

    .singleList {
      float: left;
      width: 100%;
    }

    .blackButton {
      width: 100%;
      padding: 3px 5px;
      text-align: center;
      background-color: var(--main-color);
      font-family: KleinBlack;
      border-radius: 4px;
      color: var(--contrast-color);
      font-family: KleinBook;
      border: 0px;
      cursor: pointer;
    }

    .alert {
      width: 100% !important;
    }

    .catalog {
      margin-top: 20px;
      width: 200px;
      text-align: center;
    }

    .catalog img {
      width: 200px;
    }
  }