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

*{
  box-sizing: border-box;
}
#nos-packs, #nos-offres{
  .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;
        flex-wrap: wrap;
        width: 100%;
        .__thumbnails{
          margin: 0 1rem;
          width: calc((100% / 4) - 2rem);
          .__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{
              position: relative;
              height: 250px;
              img{
                width: 100%;
                height: 100%;
                object-fit: cover;
              }
            }

          }

        }

      }
      .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;
            a{
              outline: none;
              border: 0;
            }
            &: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;
            .triangle{
              position: absolute;
              z-index: -1;
              bottom: 0;
              left: 50%;
              transform: translate(-50%,0%);
              display : inline-block;
              height : 0;
              width : 0;
              border-top : 20px solid;
              border-right : 15px solid transparent;
              border-left : 15px solid transparent;
              transition: 0.1s transform ease;
              &.visible{
                transform: translate(-50%,90%);
                transition: 0.1s transform ease;
              }
              &.__blue{
                  border-top : 20px solid $light-blue;
              }
              &.__green{
                border-top : 20px solid $green;
              }
              &.__red{
                border-top : 20px solid $red;
              }
            }
            &.__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;
      }

      .__more{
        display: none;
        margin: 2rem 1rem;
        .__txt.black{
          p{
            color: black!important;
          }
        }
        &.__blue{
          .__title{
            color: $light-blue;
          }
          .__txt{
            p{
              color: $light-blue;
            }
          }

          }
        &.__green{
          .__title{
            color: $green;
          }
          .__txt{
            p{
              color: $green;
            }
          }
        }
        &.__red{
          .__title{
            color: $red;
          }
          .__txt{
            p{
              color: $red;
            }
          }
        }
        &.visible{
          display: block;
        }
        .__details{
          position: relative;
        }
        .__image-background{
          width: 100%;
          height: auto;
          img{
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
        .__wrap-content{
          z-index: 999;
          width: 100%;
          height: auto;
          padding: 2rem;
          display: flex;
          justify-content: flex-end;
          .__content{
            background: white;
            width: 50%;
            height: auto;
            padding: 2rem;
            position: relative;
            .close{
              position: absolute;
              top: 1rem;
              right: 1rem;
              cursor: pointer;

            }
            .__title{
              h6{
                margin:0;
                font-size: 1.3rem;
                font-family: $now_alt_medium;
              }
            }
            .__txt{
              p{
                font-size: 1rem;
                font-family: $now_alt_medium;
              }
              &.__color{
                color: $light-blue;
                margin-bottom: 1rem;
              }
            }
            .__btn{
              display: inline-flex;
              margin-top: 1rem;
              & > div{
                background: $light-blue;
                margin: 0;
                transition: 0.3s transform ease, 0.3s box-shadow ease;
                &:hover{
                  transform: scale(1.015);
                  box-shadow: 0 0px 10px rgba(0, 0, 0, 0.2);
                  transition: 0.3s transform ease, 0.3s box-shadow ease;
                }
                &:not(:first-child){
                  margin: 0 1rem;
                }
              }
              a{
                font-family: $now_alt_medium;
                font-size: 0.9rem;
                color: white;
                padding: 0.5rem 1.5rem;
              }

            }
          }
        }
        &.open{
          display: block;
        }
      }

    }

  }
}