.main {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.wrap {
  margin: 2rem;

  transform-style: preserve-3d;
  transform: perspective(100rem);

  cursor: pointer;
}

.container-p {
  --rX: 0;
  --rY: 25;
  --bX: 50%;
  --bY: 80%;

  width: 20rem;
  height: 25rem;
  border: 1px solid var(--background-color);
  border-radius: 0.4rem;
  padding: 4rem;

  display: flex;
  align-items: flex-end;

  position: relative;
  transform: rotateX(calc(var(--rX) * 1deg)) rotateY(calc(var(--rY) * 1deg));


  transition: transform .6s .3s;
}
.img1{
  background: linear-gradient(hsla(0, 0%, 100%, .1), hsla(0, 0%, 100%, .1)), url("img/web2.jpg");
  background-size: 100%;
}
.img2{
  background: linear-gradient(hsla(0, 0%, 100%, .1), hsla(0, 0%, 100%, .1)), url("img/web3.jpg");
  background-size: 100%;
}

.img3{
  background: linear-gradient(hsla(0, 0%, 100%, .1), hsla(0, 0%, 100%, .1)), url("img/web4.jpg");
  background-size: 100%;
}
.img4{
  background: linear-gradient(hsla(0, 0%, 100%, .1), hsla(0, 0%, 100%, .1)), url("img/web5.jpg");
  background-size: 100%;
}
.img5{
  background: linear-gradient(hsla(0, 0%, 100%, .1), hsla(0, 0%, 100%, .1)), url("img/web4.jpg");
  background-size: 100%;
}
.img6{
  background: linear-gradient(hsla(0, 0%, 100%, .1), hsla(0, 0%, 100%, .1)), url("img/web4.jpg");
  background-size: 100%;
}





.container-p::before {
  top: 2rem;
  right: 2rem;

  border-bottom-width: 0;
  border-left-width: 0;
}

.container-p::after {
  bottom: 2rem;
  left: 2rem;

  border-top-width: 0;
  border-right-width: 0;
}

.container-p--active {
  transition: none;
}

.container-p--2 {
  filter: hue-rotate(80deg) saturate(140%);
}

.container-p--3 {
  filter: hue-rotate(160deg) saturate(140%);
}

.container-p p {
  color: hsla(0, 0%, 100%, .6);
  font-size: 2.2rem;
}

.wrap:hover .container-p::before,
.wrap:hover .container-p::after {
  width: calc(100% - 4rem);
  height: calc(100% - 4rem);
}

.abs-site-link {
  position: fixed;
  bottom: 20px;
  left: 20px;
  color: hsla(0, 0%, 0%, .6);
  font-size: 1.6rem;
}