@import "../helpers/colors.scss";

.content-wrapper {
  // padding: 10% 2%;
  padding-top: 92px;
  width: 100%;
  background-color: #f7f7f7;

  main {
    .pageTitle {
      color: $black;
      font-size: 2.6rem;
      @include boldFont();
      margin-left: 48px;
      position: relative;
      // &::before {
      //   content: " ";
      //   background: url('../../../img/icons/star.svg');
      //   @include bg-props(cover, center, no-repeat);
      //   position: absolute;
      //   bottom: 5px;
      //   left: -36px;
      //   height: 30px;
      //   width: 30px;
      // }
    }

    section {
      &.preferiti {
        .modal-card {
          height: 300px;

          a {
            &.removeFavCard {
              img {
                width: 16px;
              }

              background: url(../../../img/icons/star-white.svg);
              background-size: 55%;
              background-repeat: no-repeat;
              background-position: center;

              &.hovered {
                background: url(../../../img/icons/trash-alt-solid.svg);
                background-size: 40%;
                background-repeat: no-repeat;
                background-position: center;
              }
            }
          }

          img {
            width: 290px;
            margin-bottom: 20px;
          }

          h4 {
            margin-bottom: 40px;
          }

          .cardLink {
            margin-bottom: 35px;
          }
        }
      }
    }
  }
}

@media(max-width:1440px) {

  .content-wrapper {
    main {
      section {
        &.preferiti {
          // padding: 0 11% 0 0;

          .modal-card {
            img {
              width: 70%;
            }
          }
        }
      }
    }
  }
}

@media(max-width:1120px) {

  .content-wrapper {
    main {
      section {
        &.preferiti {
          .modal-card {
            height: auto;

            button {
              padding: 15px 0;
              font-size: 1rem;
            }
          }
        }
      }
    }
  }
}