.gallery {
  --size: min(130vmin, 400px);
  position: absolute;
  top: 35%;
  left: 30%;
  transform: translate(-50%, -50%);
  box-shadow: 
    0 0 10px #0002,
    0 20px 40px -20px #0004;
  width: var(--size);
  height: var(--size);
  background: #fff;
  border: 6px solid #fff;
  display: grid;
  grid-template-rows: 50% 50%;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  gap: 6px;
  align-items: right;
  border: 1px solid #fff;  
}
@media only screen and (max-width: 991px)
{
    .gallery{
    --size: min(50vmin, 150px);
    position: absolute;
        }
}
.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@keyframes moveHorizontal {
  to {
    object-position: 100% 0;
  }
}
@keyframes moveVertical {
  to {
    object-position: 0 100%;
  }
}
@keyframes shrinkVertical {
  to {
    height: 0;
  }
}

@keyframes shrinkHorizontal {
  to {
    width: 0;
  }
}
@keyframes growHorizontal {
  to {
    width: 100%;
  }
}
@keyframes growHorizontal2 {
  to {
    width: 70%;
  }
}
@keyframes growVertical {
  to {
    height: 100%;
  }
}
@keyframes growAll {
  to {
    width: 100%;
    height: 100%;
  }
}
.gallery img:nth-child(1) {
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
  animation: 
    moveHorizontal 8.5s 0.5s 1,
    shrinkHorizontal 2s 9s ease-in 1;
  animation-fill-mode: forwards;
}
.gallery img:nth-child(2) {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  animation: 
    shrinkHorizontal 2s 11s 1;
  animation-fill-mode: forwards;
}
.gallery img:nth-child(3) {
  grid-row: 2;
  grid-column: 1 / 3;
  align-self: end;
  object-position: 0 0;
  animation:
    moveVertical 5s 1s 1,
    shrinkVertical 3s 5s 1;
  animation-fill-mode: forwards;
}
.gallery img:nth-child(4) {
  grid-column: 1 / 3;
  grid-row: 1;
  width: 0;
  justify-self: center;
  align-self: start;
  animation: 
    growHorizontal 2.25s 11s 1,
    moveHorizontal 4s 14s 1,
    shrinkVertical 2s 18s 1;
  animation-fill-mode: forwards;
}
.gallery img:nth-child(5) {
  grid-column: 1;
  grid-row: 2;
  width: 0;
  justify-self: start;
  align-self: end;
  animation: 
    growHorizontal 2.5s 7.5s 1,
    moveVertical 4s 12.5s 1,
    shrinkHorizontal 2s 17s 1;;
  animation-fill-mode: forwards;
}
.gallery img:nth-child(6) {
  grid-column: 2;
  grid-row: 2;
  width: 0;
  justify-self: end;
  align-self: end;
  animation: 
    growHorizontal 2s 8s 1,
    shrinkHorizontal 2s 17s 1;
  animation-fill-mode: forwards;
}
.gallery img:nth-child(7) {
  grid-column: 1/3;
  grid-row: 1/3;
  width: 0;
  justify-self: end;
  align-self: end;
  object-position: 0 0;
  animation: 
    growHorizontal 2s 20s 1,
    moveHorizontal 16s 21.5s 1;
  animation-fill-mode: forwards;
}
.example {
    position: relative;
    width: 100%;
    padding-top: 50%;
    margin: 13rem auto;
    
    > .block {
        position: absolute;
        height: 100%;
        width: 30%;
        perspective: 1000px;        
        &:nth-of-type(1) {
            height: 80%;
            top: 10%;
            left: 17%;
            width: 15%;
        }        
        &:nth-of-type(2) {
            top: 0;
            left: 35%;
        }        
        &:nth-of-type(3) {
            height: 80%;
            top: 10%;
            left: 64%;
            width: 15%;
        }
    }
    
    > .block > .side {
        position: absolute;
        top: 0;
        left: 0;
        background-image: url('images/home2.jpg');
        background-size: auto 100%;
        box-shadow: -1vw .5vw 1vw rgba(0, 0, 0, .3);        
        &.-main {  
            height: 100%;
            width: 100%;
            transform: rotateY(30deg);
            transform-origin: 0 50%;
        }        
        &.-left {
            height: 100%;
            width: 20%;
            transform-origin: 0 50%;
            transform: rotateY(-60deg) translateX(-100%);
            filter: brightness(40%);
        }
    }    
    > .block:nth-of-type(1) > .side {
        &.-main {
            background-position: 4% 50%;
            background-size: auto 130%;
        }
        
        &.-left {
            background-position: 0 50%;
            background-size: auto 130%;
        }
    }    
    > .block:nth-of-type(2) > .side {
        &.-main {
            background-position: 50% 0;
        }
        
        &.-left {
            background-position: 28.5% 0;
        }
    }    
    > .block:nth-of-type(3) > .side {
        &.-main {
            background-position: 96% 50%;
            background-size: auto 130%;
        }
        
        &.-left {
            background-position: 78% 50%;
            background-size: auto 130%;
        }
    }
}
#btn-back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
display: none;
background-color: #000;
color: #fff;
border: 1px solid #000;
z-index: 9999;
}
.container2{
  max-width:1100px;
  margin:100px auto;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-around;
  border-radius: 20px 0 20px 20px;
}
.card{
  position:relative;
  margin:20px 0;
  width:300px;
  height:400px;
  background: #fff;
  transform-style:preserve-3d;
  transform:perspective(2000px);
  transition:1s;
  border-radius: 20px 0 20px 20px;
  box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}
@media only screen and (max-width: 767px){
    .container2{
  max-width:600px;
  margin:150px auto;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-around;
  border-radius: 10px 0 10px 10px;
}
.card{
    position:relative;
  margin:70px 0;
  width:250px;
  height:350px;
  background: #fff;
  transform-style:preserve-3d; 
  border-radius: 10px 0 10px 10px;
    }
}
.card:hover{
  z-index:1111;
  transform:perspective(2000px) rotate(-10deg);  
}
.card .img-container{
  position:relative;
  width:100%;
  height:100%;  
  box-sizing:border-box;
  transform-origin:left;
  z-index:1;
  transition:1s;
  border-radius: 20px 0 20px 20px;
  box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}
.card .img-container img{
  position:absolute;
  left:0;
  top:0;
  height:100%;
  width:100%;
  object-fit:cover;
  border-radius: 20px 0 20px 20px;
}
.card:hover .img-container{
  transform:rotateY(-135deg);
}
.card .card-details{
  position:absolute;
  left:0;
  top:0;
  box-sizing:border-box;
  padding:20px;
  color:##192324;
}
 .card .card-details h1{
  margin:0;
  padding:0.5em 0;
  text-transform:uppercase;
  font-size:2em;
  color:##192324;
}
.card .card-details p{
  margin:0;
  padding:0;
  line-height:25px;
  font-size:1.1em;
}
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}
/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}
/* The dots/bullets/indicators */
.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #000;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
.active {
  background-color: #717171;
}
/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 3.5s;
}
@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}