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);
          display: flex;
          flex-direction: column;
          align-self: baseline;
          .__title{
            text-align: center;
            margin-bottom: 1rem;
            .__d-inline{
              display: inline-block;
              border-bottom: 3px solid #b5cb3a;
              width: max-content;
              max-width: 100%;
              padding-bottom: 0.5rem;
              span{
                display: block;
                text-align: center;
                padding: 0 1.5rem 0.2rem 1.5rem;
                font-size: 0.8rem;
                font-family: $now_alt_medium;
              }
            }
          }
          .__thumb{
            position: relative;
            .__images{
              position: relative;
              height: 200px;
              overflow: hidden;
              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.__hover{
            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%);
                img{
                  filter: grayscale(100%);
                  transition: 0.5s filter ease;
                }

              }
            }
          }
          .__images{
            .__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: 1rem;
                font-family: $now_alt_medium;
              }
            }

          }
          .__btn{
            color: white;
            display: block;
            padding: 0.7rem 0;
            margin-top:  1rem;
            font-size: 0.8rem;
            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{
            .__sub-title{
              opacity: 1;
              transform: translateY(-50%);
              transition: 0.5s transform ease, 1s opacity ease;
            }
          }
        }
        }

      }

      &:last-child{
        margin-bottom: 100px;
      }
      .__thumbnails{
        &:nth-child(1){
          .__more{
            width: calc(100% * 4 + 6rem);
          }
        }
        &:nth-child(2){
          .__more{
            width: calc(100% * 4 + 6rem);
            transform: translateX(calc((-100% / 4) - 0.5rem));
          }
        }
        &:nth-child(3){
          .__more{
            width: calc(100% * 4 + 6rem);
            transform: translateX(calc((-100% / 2) - 1rem));
          }
        }
      }
      .__more{
        display: none;
        position: relative;
        left: 0;
        right: 0;
        // width: calc(100% * 4 - 6rem);
        margin: 0;
        margin: 2rem 0rem;
        .__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{
              text-align: left;
              h6{
                margin:0;
                font-size: 1.3rem;
                font-family: $now_alt_medium;
              }
            }
            .__txt{
              p{
                font-size: 0.9rem;
                font-family: $now_alt_medium;
              }
              &.__color{
                color: $light-blue;
                margin-bottom: 1rem;
              }
            }
            .__btn{
              display: inline-flex;
              margin-top: 1rem;
              width: 100%;
              & > div{
                width: 50%;
                background: $light-blue;
                margin: 0;
                transition: 0.3s transform ease, 0.3s box-shadow ease;
                padding: 0.5rem 1.5rem;
                &: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-left: 1rem;
                }
              }
              a{
                font-family: $now_alt_medium;
                font-size: 0.7rem;
                color: white;
                // margin: 0 1rem;
                // padding: 0.5rem 1.5rem;
              }

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

    }

  }
}

@media screen and (max-width: 1200px) {
  #nos-packs, #nos-offres{
    .content{
      .section{
        .__intro{
          margin: 70px 0;
          p{
            padding: 0!important;
          }
        }
        .d-flex{
          .__thumbnails{
            width: calc((100% / 3) - 2rem);
            margin-bottom: 2rem;
            .__more{
              width: calc(100% * 3 + 4rem);
            .__content{
              width: 100%;
            }
          }
          &:nth-child(2){
            .__more{
              transform: translateX(calc((-100% / 3) - 0.5rem));
            }
          }
          &:nth-child(3){
            .__more{
              transform: translateX(calc((-100% / 1.5) - 1rem));
            }
          }
          }
        }
      }
    }
  }
}

@media screen and (max-width: 1024px) {
  #nos-packs, #nos-offres{
    .content{
      .section{
        .__intro{
          margin: 50px 0;
        }
        .d-flex{
          .__thumbnails{
            width: calc((100% / 2) - 2rem);
            margin-bottom: 2rem;
              .__more{
                width: calc(100% * 2 + 2rem);
              .__content{
                width: 100%;
              }
            }
            &:nth-child(2){
              .__more{
                transform: translateX(calc((-100% / 2) - 1rem));
              }
            }
            &:nth-child(3){
              .__more{
                transform: translateX(-0%);
              }
            }

          }

        }

      }

    }

}

}

@media screen and (max-width: 530px) {
  #nos-packs, #nos-offres{
    .content{
      .section{
        .__intro{
          margin: 20px 0;
        }
        .d-flex{
          .__thumbnails{
            width: calc((100%) - 2rem);
            margin-bottom: 2rem;
            .__title{
              margin-bottom: 0.5rem;
              .__d-inline{
                padding-bottom: 0.2rem;
                span{
                  padding: 0 1.5rem;
                  font-size: 1rem;
                }
              }
            }
            .__more{
              width: calc(100%);
              .__details{
                padding: 1rem;
                .__content{
                  width: 100%;
                  padding: 1rem;
                  p{
                    padding: 0!important;
                  }
                  .close{
                    top: 0.5rem;
                    right: 0.5rem;
                  }
                }
              }
            .__btn{
              flex-direction: column;
              & > div{
                margin: auto 0 1rem 0!important;
                width: 100%;
              }
            }
          }
          &:nth-child(2){
            .__more{
              transform: translateX(0%);
            }
          }
          &:nth-child(3){
            .__more{
              transform: translateX(-0%);
            }
          }

          }
        }
      }
    }
  }
}