.grid-container {
  display: grid;
  grid-template-areas:
    'logo logo '
    'video1 video2 '
    'audio1 audio2';
    gap:2px
}


body{
    background-image:linear-gradient(#72080c,#430507)
}
.video1{
  grid-area: video1;

}

.video2{
  grid-area: video2;

}
.logo{grid-area: logo;
display: block;
 margin-left: auto;
  margin-right: auto;}


 

.audio1{
  grid-area: audio1;
}
.audio2{
  grid-area: audio2;

}
video{  

  border-radius: 20px;
  border: solid #d49b0ac8;
 

}
@keyframes spin {
	from { transform: rotate(360deg); }
	to { transform: rotate(0deg); }
  }
  .logo {
    transition: transform .7s ease-in-out;
    }
    .logo:hover {
    transform: rotate(360deg);
    }
  h1{
  
      transition: width 2s, height 2s, transform 2s ease-in-out
    }
    h1:hover{
      width: 300px;
      height: 300px;
      transform: rotate(180deg);
    }
   
    .audio2{
      transform: .7s ease-in-out;
    }
    .audio2:hover{
   
    
  animation: tilt-shaking 0.3s infinite;

    }
    @keyframes tilt-shaking {
      0% { transform: rotate(0deg); }
      25% { transform: rotate(5deg); }
      50% { transform: rotate(0eg); }
      75% { transform: rotate(-5deg); }
      100% { transform: rotate(0deg); }
    }