.mediacontainer {
  min-height: auto;
  margin-top: 100px;
  font-family: "poppins";
  position: relative;
  box-sizing: border-box;
  padding-bottom: 8vw;
}
.mediacontainer .title {
  padding: 5vw 0 0 4vw;
}

.mediacontainer .title .line h1,
.mediacontainer .title .line h2 {
  font-size: 3.5vw;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--dark-grey);
  position: relative;
  line-height: 4vw;
}
.mediacontainer .title .line2 {
  overflow: hidden;
}
/* .mediacontainer .title .line2 span {
  letter-spacing: -0.5vw;
} */
.mediacontainer .title .line2 h3 {
  color: var(--primary-color);
  font-size: 2.5vw;
}

.mediacontainer .title-container {
  overflow: hidden;
  overflow: hidden;
  overflow: hidden;
}
.mediacontainer .title span {
  color: var(--primary-color);
}

.gallery {
  height: 50%;
  width: 100%;
  display: flex;
  gap: 3vw;
  align-items: center;
  margin: 4vh auto;
  padding: 0 4vw;
  overflow: hidden;
}
.gallery img {
  height: 100%;
  width: 30%;
  object-fit: cover;
}
/* 
.gallery .leftpart {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4vh; */
/* flex-direction: column; */
/* } */
/* .gallery .rightpart {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4vh;
  flex-direction: column;
} */

@keyframes morphShape {
  0% {
    transform: scale(1) skew(0deg); /* Start with the original shape */
  }
  25% {
    transform: scale(1.1) skew(5deg, 5deg); /* Slightly distort */
  }
  50% {
    transform: scale(0.9) skew(-5deg, -5deg); /* Distort in the other direction */
  }
  75% {
    transform: scale(1.05) skew(10deg, 0deg); /* Skew horizontally */
  }
  100% {
    transform: scale(1) skew(0deg); /* Return to original shape */
  }
}

.blur-background {
  position: absolute;
  top: 2%;
  right: 8%;
  width: 450px;
  height: 250px;
  /* background-image: url("../../../public/images/MediaPage/moleculesBackground.png"); */
  background-image: url("../../../public/images/MediaPage/mediaBackground.png");
  background-size: contain;
  background-repeat: no-repeat;
  /* transform: translate(-50%, -50%); */
  z-index: -1;
  opacity: 1;
  /* transform: rotate(-200deg); */
}

.gallery .leftpart img,
.gallery .rightpart img {
  width: 100%;
  height: 50%;
  object-fit: cover;
  border-radius: 1vw;
  object-position: top;
}

@media (max-width: 768px) {
  .mediacontainer {
    margin-top: 70px;
    overflow-x: hidden;
  }
  .mediacontainer .title .line h1 {
    font-size: 6vw;
  }
  .mediacontainer .title .line2 h2 {
    line-height: 8vw;
    padding-top: 1vh;
  }
  .gallery {
    height: 100%;
    width: 90%;
    flex-direction: column;
    align-items: start;
    padding: 0;
    gap: 5vh;
    margin: 2vh auto 0 auto;
  }
  .gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .blur-background {
    /* display: none; */
    height: 150px;
    width: 150px;
    top: 0%;
  }
}