.wrapper {
    display: flex;
    width: 50vw;
    height: 60vh;
    border-radius: 10px;
    overflow: hidden;
    margin: 0 auto;
  }
  
  @media screen and (max-width:768px) {
    .wrapper{
      width:80vw;
    }
  }
  .panel {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: flex 0.5s ease-in;
    
  }
  
  .panel h2 {
    position: absolute;
    font-size: 2rem;
    padding: 10px 20px;
    transition: all 0.5s ease;
  }
  
  .panel:hover h2 {
    background-color: rgba(255, 255, 255, 0.7);
    color: black;
    transform: translateY(-100%);
  }
  
  .panel1 {
    background: url('../img/footer/IMG_5593.jpeg') no-repeat center center/cover;
  }
  
  .panel2 {
    background: url('../img/footer/IMG_5591.jpeg') no-repeat center center/cover;
  }
  
  .panel3 {
    background: url('../img/footer/IMG_5582.jpeg') no-repeat center center/cover;
  }
  
  .panel4 {
    background: url('../img/footer/IMG_5585.jpeg') no-repeat center center/cover;
  }
  
  .panel:hover {
    flex: 5;
  }
  
  .panel:not(:hover) {
    flex: 0.5;
  }
  
  /* Intro animation */
  .testi-tp {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background-color: black; */
    display: flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
  }
  
  .animated-text {
    font-size: 5rem;
    animation: slide-in 1.5s forwards,  1s 3s forwards;
  }
  
  @keyframes slide-in {
    0% {
      transform: translateY(100%);
    }
    100% {
      transform: translateY(0);
    }
  }

  
  
  /* Animation for panels when the intro fades */
  @keyframes panel-expand {
    0% {
      flex: 1;
    }
    100% {
      flex: 5;
    }
  }