.card-container {
  width: 100%;
  height: 400px;
  perspective: 800px;
  -webkit-perspective: 800px;
  -moz-perspective: 800px;
  margin-top: 15px;
}

.cards {
  -webkit-transition: transform 1500ms;
  -moz-transition: transform 1500ms;
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform 1500ms;
  transform-style: preserve-3d;
  position: relative;
  display: flex;
  align-content: center;
  align-items: flex-end;
}

.card-container:hover > .cards {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.card-front, .card-back {
  height: 100%;
  width: 100%;
  position: absolute;
  border-radius: 1rem;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
}

.card-front {
  width: 100%;
  background-image: url('../../assets/img/Before-After1.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.card-back {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  background-color: gray;
  padding: 10px;
  transform: rotateY(180deg);
}

.cardslide-container {
  width: 100%;
  height: 425px;
  position: relative;
  margin-top: 15px;
  border: 8px solid white;
  box-shadow: 3px 3px 5px rgba(0,0,0,0.8);
}

.card-slide {
  width: 100%;
  height: 100%;
  display: flex;
  align-content: center;
  align-items: flex-end;
}

.card-slide-front, .card-slide-back {
  width: 100%;
  position: relative;
  left: 0;
  inset: 0;
}

.card-slide-front {
  color: white;
  background-color: #2d2d82;
  transition: height 1s;
  height: 45px;
  padding-left: 7px;
  padding-right: 7px;
  -webkit-transition: height 1s;
  -moz-transition: height 1s;
  z-index: 1;
  padding-top: 10px;
  overflow: hidden;
}

.card-slide-back {
  background-size: cover;
  background-repeat: no-repeat;
  height: 100%;
  background-position: center;
}

.card-6 {
  background-image: url("../../assets/img/service-2.jpg");
}

.card-5 {
  background-image: url('architect-at-the-construction.jpg');
}

.card-4 {
  background-image: url('../../assets/img/driveway.jpg');
}

.card-3 {
  background-image: url('../../assets/img/service-2.jpg');
}

.card-2 {
  background-image: url('../../assets/img/service-3%20(1).jpg');
}

.card-1 {
  background-image: url('../../assets/img/service-1.jpg');
}

.card-slide-front:hover {
  height: 225px;
}

.card-still-container {
  width: 100%;
  height: 400px;
  position: relative;
  margin-top: 15px;
}

.card-still {
  width: 100%;
  height: 100%;
  display: flex;
  align-content: baseline;
  align-items: flex-end;
}

.card-still-front, .card-still-back {
  width: 100%;
  position: absolute;
}

.card-still-front {
  z-index: 1;
  height: 175px;
  background-color: blue;
  color: white;
  padding: 7px;
}

.card-still-back {
  background-image: url('../../assets/img/Before-After1.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 100%;
}

.card-flip-footer {
  z-index: 1;
  position: absolute;
  color: white;
  width: 100%;
  height: 45px;
  background-color: gray;
  font-size: 1.5em;
  padding: 5px;
  backface-visibility: hidden;
}

.card-imgs-size {
  height: 400px;
  width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.roof-sl-1 {
  background-image: url('https://t3.ftcdn.net/jpg/03/94/60/36/240_F_394603682_5aeyxbj9FBPt7JFVnVKXHDfnkYQnyogt.jpg');
}

.roof-sl-2 {
  background-image: url('https://t4.ftcdn.net/jpg/03/79/71/45/240_F_379714536_B4cJ6begM9jlwYDjc8tpQ7n7JpxG9WeA.jpg');
}

.roof-sl-3 {
  background-image: url('https://t4.ftcdn.net/jpg/02/76/60/21/240_F_276602113_Z440YsqSRpTb2Wdn73WaovK94MRTvJlL.jpg');
}

.pool-sl-1 {
  background-image: url('../../assets/img/GalleryPoolCage1.webp');
}

.pool-sl-2 {
  background-image: url('../../assets/img/GalleryPool2.webp');
}

.pool-sl-3 {
  background-image: url('../../assets/img/GalleryPool3.webp');
}

.drive-sl-1 {
  background-image: url('../../assets/img/Slide_Pavement1.webp');
}

.drive-sl-2 {
  background-image: url('../../assets/img/GalleryDriveway2.webp');
}

.drive-sl-3 {
  background-image: url('../../assets/img/GalleryDriveway3.webp');
}

.house-sl-1 {
  background-image: url('../../assets/img/GalleryHouse1.webp');
}

.house-sl-2 {
  background-image: url('../../assets/img/GalleryHouse2.webp');
}

.house-sl-3 {
  background-image: url('../../assets/img/GalleryHouse3.webp');
}

.gutter-sl-1 {
  background-image: url('https://t3.ftcdn.net/jpg/02/15/81/56/240_F_215815610_7xkzgbLTrRvvIZGCOUAFcFn930ncNhrL.jpg');
}

.gutter-sl-2 {
  background-image: url('https://t3.ftcdn.net/jpg/01/57/32/78/240_F_157327891_1B3RRJJE4EZ5tz8l17KmWn75MD8S20au.jpg');
}

.gutter-sl-3 {
  background-image: url('https://t4.ftcdn.net/jpg/03/80/88/87/360_F_380888713_4WcKSlqQgg8jJqxkMiMNCVLZPvs0wjVr.jpg');
}

.fence-sl-1 {
  background-image: url('../../assets/img/GalleryFence1.webp');
}

.fence-sl-2 {
  background-image: url('../../assets/img/GalleryDeck1.webp');
}

.fence-sl-3 {
  background-image: url('https://t4.ftcdn.net/jpg/02/22/21/13/240_F_222211330_geaUM0HjgpVWi1KKcw7CMB5NZch3CY8i.jpg');
}

.paver-sl-1 {
  background-image: url('../../assets/img/GalleryPavers1.webp');
}

.paver-sl-2 {
  background-image: url('../../assets/img/GalleryPavers2.webp');
}

.paver-sl-3 {
  background-image: url('../../assets/img/GalleryPavers3.webp');
}

.more-sl-1 {
  background-image: url('../../assets/img/image_placeholder.jpg');
}

.more-sl-2 {
  background-image: url('../../assets/img/image_placeholder.jpg');
}

.more-sl-3 {
  background-image: url('../../assets/img/image_placeholder.jpg');
}