/* === PROJECT_BANNER STYLE === */
.project__banner {
  height: 500px;
  background-image: url("./assests/project__banner.png");
  background-position: left 15%;
  background-size: cover;
}

.project__banner .grd__ovl {
  height: 100%;
  background: rgb(49, 18, 117);
  background: linear-gradient(
    90deg,
    rgba(50, 5, 107, 1) 27%,
    rgba(50, 5, 107, 0) 100%
  );
}


.card__1 {
  width: 300px;
  height: 400px;
  position: relative;
  /* overflow: hidden; */
  background-image: url("./assests/project__img.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  mix-blend-mode: multiply;
}

.card__1 img {
  width: 300px;
}

.card__1 .card__content {
  position: relative;
  z-index: 6;
  opacity: 1;
}

.card__2 {
  width: 300px;
  height: 400px;
  position: relative;
  /* overflow: hidden; */
  background-image: url("./assests/project__img.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  mix-blend-mode: multiply;
}

.card__overlay {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 30px;
  background-color: black;
  width: 100%;
  height: 100%;
  mix-blend-mode: multiply;
  opacity: 0.3;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {

  .project__banner {
    height: 300px;
  }

  .card__1 img {
    padding: 40px 0px;
    width: 100px;
  }

  .card__2 {
    padding: 80px 0px;
    width: 300px;
    height: 400px;
  }
}