kafelki-strona-glowna/less_css.less

.menu_contener_kafelki {
    display: flex;
    justify-content: center;
  }
  .menu_kafelki {
    max-width: 500px;
  }
  
  .--sec-full{
      width: 100vw;
      margin-left: -50vw;
      left: 50%;
      position: relative;
  }
  
  // CAT-S
  .core-sg-cat {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height:300px;
    
    @media(min-width: 979px){
      min-height:540px;
    }
    @media(min-width: 1200px){
      min-height:300px;
    }  
    
    img {
      border-radius: 10px;
    }  
    
    &-footer {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      
      &-text {
        position: relative;
        color: #fff;
        padding: 50px;
        
        &:before{
          content: "\F105";
          font-family: FontAwesome;
          font-weight: normal;
          font-style: normal;
          text-decoration: inherit;
          -webkit-font-smoothing: antialiased;
          font-size: 3rem;
          
          position: absolute;
          top: 50%;
          right: 50px;
          transform: translateY(-50%);
        } 
        
        &-prim {
          font-size: 2.4rem;
          font-weight: bold;
        }    
      }
    }  
  }
  
  // SWIPE
  .core-sg-swipe-cat {
    position: relative;
    text-align: center;
  
    img {
      border-radius: 10px;
    }
  
    &-jumbo {
      position: absolute;
      bottom: 45%;
      left: 0;
      right: 0;
  
      &-text {
        position: relative;
        color: #fff;
        padding: 50px;
  
        &-prim {
          font-size: 4rem;
          font-weight: bold;
        }
      }
    }
  }
  
  // HOVER //
  .core-sg a,
  .core-sg-swipe a{
    .core-sg-cat-footer,
    .core-sg-swipe-cat-jumbo,
    img{
        transition: all 0.5s ease-in-out;
    }
    
    &:hover{
      .core-sg-cat-footer,
      .core-sg-swipe-cat-jumbo{
          transform: translateY(-10px);
      }
      img{
          filter: brightness(0.5);
      }
    }
  }
  
  
  .products__container{
    display: none;
  }
  // Mobile
  @media (max-width: 756px){
    #main_banner1{
      display: none;
    }
    .menu_contener_kafelki{
      padding: 0 1rem;
      display: grid!important;
      grid-template-columns: 1fr 1fr!important;
      grid-template-rows: 1fr 1fr!important;
      margin-top: 1rem;
      .menu_kafelki{
        padding-left: 0.5rem!important;
        padding-right: 0.5rem!important;
        a{
          height: 100%;
          display: inline-block;
          .core-sg-cat{
            min-height: auto;
            overflow: hidden;
            height: 100%;
            border-radius: 10px;
            img{
              transform: scale(1.3);
            }
          }
        }
        .core-sg-cat-footer-text{
          padding: 10px;
          &::before{
            right: 10%;
          }
          .core-sg-cat-footer-text-prim{
            font-size: 3rem;
          }
          .core-sg-cat-footer-text-sec{
            font-size: 2rem;
          }
        }
        
        &:last-child{
          order: -1;
          a{
            overflow: hidden;
            border-radius: 10px;
          }
          img{
            transform: scale(1.05);
          }
        }
      }
    }
    
    #core-sg-swipe{
      .slick-slide{
        transition: all 0.3s;
      }
      .slick-slide[aria-hidden="true"]{
        opacity: 0.2;
      }
      .slick-slide[aria-hidden="false"]{
        opacity: 1;
      }
    } 
    .core-sg-swipe-cat img{
      object-fit: cover;
      width: 260px;
      height: 300px;
    }
    .core-sg-swipe-cat-jumbo{
      bottom: 28%;
      left: -2%;
    }
    .core-sg-swipe-cat-jumbo-text-prim{
      font-size: 3rem;
    }
    
    .products__container{
      display: block;
      .products__title{
        text-align: center;
        color: #000;
        font-size: 2.8rem;
        margin-bottom: 3rem;
      }
      .products__products{
        display: grid;
        grid-template-columns: 50% 50%;
        gap: 1rem;
        .product__icon{
          min-height: auto;
          picture{
            display: flex;
          }
        }
        .--last-link{
          a{
            text-decoration: none;
            display: flex;
            justify-content: center;
            align-items: center;  
            border: 1px solid #CCC;
            border-radius: 15px;
            span{
              font-size: 1.6rem;
              display: flex;
              align-items: center;
              gap: 0.8rem;
              &::after{
                content: "\F105";
                font-family: FontAwesome;
                font-size: 3rem;
                margin-top: -0.2rem;
              }
            }
          }
        }
      }
      
      .product{
        width: auto!important;
        .product-core-wrapper.m-2{
          margin:0!important;
        }
        .product-core-wrapper{
          display: flex;
          flex-direction: column;
        }
        .label_icons{
          gap: 0.5rem;
          padding-bottom: 0.5rem!important;
        }
        .product__sizes {
          order: 10;
          display: flex;
          gap: 0.5rem;
        }
      }
    }
    .products__container--bestseller{
      padding-bottom: 2rem;
      margin-bottom: 3rem;
      border-bottom: 1px solid #CCC;
      .products__title{
        margin-top: 2rem;
      }
    }
  }
  @media (max-width: 650px){
     .core-sg-cat-footer-text-prim{
            font-size: 2.4rem!important;
          }
          .core-sg-cat-footer-text-sec{
            font-size: 1.6rem!important;
          }
  }
  @media (max-width: 500px){
    .core-sg-swipe-cat img{
      width: 130px;
      height: 150px;
    }
    .core-sg-swipe-cat-jumbo-text {
      padding: 0;
    }
    .core-sg-cat-footer-text-prim{
      font-size: 2rem!important;
    }
    .core-sg-cat-footer-text-sec{
      font-size: 1.2rem!important;
    }
  
    .core-sg-swipe-cat-jumbo{
      bottom: 50%;
      left: 0;
      transform: translateY(50%);
    }
    .core-sg-swipe-cat-jumbo-text-prim{
      font-size: 1.6rem;
    }
  }