lecampus.valdedrome.com/user/themes/lecampus/scss/theme/thumbnails/thumbnails.scss

#nos-packs{
  .content{
    margin-top: 0;
    width: 70%;
    margin: auto;
    .section{
      .__intro{
        text-align: center;
        color: $light-blue;
        margin: 100px 0;
        p{
          font-family: $now_alt_bold;
          font-size: 1.2rem;
        }
      }
      .d-flex{
        display: inline-flex;
        width: 100%;
        .__more{
          display: none
        }
        .__thumbnails{
          margin: 0 1rem;
          .__title{
            text-align: center;
            p{
              border-bottom: 3px solid #b5cb3a;
              width: max-content;
              margin: 0 auto 1rem auto;
              padding: 0 1.5rem 0.2rem 1.5rem;
              font-size: 1rem;
              font-family: $now_alt_medium;
            }
          }
          .__thumb{
            position: relative;
            .__images{
              width: 300px;
              height: 300px;
              position: relative;
              object-fit: cover;
              img{
                width: 100%;
                height: 100%;
              }
            }

          }

        }

      }
      .dl_brochure{
        width: 100%;
        margin: 100px 0;
        a{
          font-size: 1.5rem;
          font-family: $now_alt_medium;
          display: block;
          text-align: center;
          text-transform: uppercase;
          color: $light-blue;
        }
      }
      &.nos_pack{
        .__thumbnails{
          .__thumb{
            transition: 0.3s transform ease;
            &:hover{
              transform: scale(1.015);
              transition: 0.3s transform ease, 0.3s box-shadow ease;
              .__images, .__btn{
                box-shadow: 0 0px 10px rgba(0, 0, 0, 0.2);
                transition: 0.3s box-shadow ease;
              }
            }
          }
          .__images{
            transition: 0.5s filter ease;
            filter: grayscale(0%);
            .__sub-title{
              opacity: 0;
              position: absolute;
              top: 50%;
              left: 0;
              transform: translateY(-0%);
              text-align: center;
              color: white;
              padding: 1rem;
              transition: 0.5s transform ease, 1s opacity ease;
              p{
                font-size: 1.2rem;
                font-family: $now_alt_medium;
              }
            }

          }
          .__btn{
            color: white;
            display: block;
            padding: 0.7rem 0;
            margin-top:  1rem;
            font-size: 1rem;
            font-family: $now_alt_medium;

            text-align: center;

            &.__blue{
              background: $light-blue;
            }
            &.__green{
              background: $green;
            }
            &.__red{
              background: $red;
            }
            &.__grey{
              background: $grey;
            }
          }

          &:hover{
          .__images{
            img{
              filter: grayscale(100%);
              transition: 0.5s filter ease;
            }
            .__sub-title{
              opacity: 1;
              transform: translateY(-50%);
              transition: 0.5s transform ease, 1s opacity ease;
            }
          }
        }
        }

      }

      &:last-child{
        margin-bottom: 100px;
      }

    }

  }
}