@media screen and (max-width: 600px) {
  /* CSS rules to apply when the condition is true */
  
.item1 {
      flex-direction: column;
     
  }
  .item1>.div1{
    margin: 0 auto;
    padding: 0;
  }
   .item1>.div2{
    margin: 0 auto;
    padding: 0;
    margin: 0;
    letter-spacing: 10px;
    position: relative;
    box-sizing: content-box;
  }
   #name{
    margin: 0 auto;  
    word-break: break-all;
    word-wrap: break-word;
    letter-spacing: 0;
    box-sizing: content-box;
    
   
  }
  .menu>ul
  {
    display: flex;    
    justify-content:flex-start;
    align-items: stretch; 
    flex-flow:wrap; 
    flex-direction: column; 
    flex-wrap: nowrap; 
    align-content: stretch; 
    
    
  }
  ul>li
  {    
    padding: 5px;
    margin: 5px;
    
  }
  .box
  {
    
    gap: 5px;
    flex-wrap: wrap;
    flex-direction:column;
    padding: 0;
    box-sizing:content-box;
  }
  .box>.item5
  {
    border: 3px solid rgb(216, 211, 211);
    border-radius: 10px;
    width: 100%;
    padding: 0;
    margin: 0 auto;
    box-sizing: content-box;
  }
   .box>.item2
  {
     border: 3px solid rgb(216, 211, 211);
    border-radius: 10px;
    width: 100%;
    padding: 0;
    margin: 0 auto;
    box-sizing: content-box;
  }
   .box>.item3
  {
     border: 3px solid rgb(216, 211, 211);
    border-radius: 10px;
    width: 100%;
    padding: 0;
    margin: 0 auto;
    box-sizing: content-box;
  }
   .box>.item4
  {
     border: 3px solid rgb(216, 211, 211);
    border-radius: 10px;
    width: 100%;
    padding: 0;
    margin: 0 auto;
    box-sizing: content-box;
  } 
  .modal-content
  {
    padding: 0;
    width: 100%;
    margin: 0;
    box-sizing: content-box;
  }
  .flex-contact
  {
    
    width: 100%;
    padding: 0;
    margin: 0 auto;
    box-sizing: content-box;
  }
  .flex-contact>div
  {
    width: 100%;
    
    box-sizing: content-box;
  }
  .div_date
  {
    width: 100%;
  }
.card-container {
    display: flex;
    flex-direction: column;    
    gap:4px;     
    border: 2px solid black;
    border-radius: 5px;
    padding: 5px;
    object-fit: cover;    
}
   
.card>img:hover {
    width: 100%;
    padding: 0;
    margin: 0;
    object-fit: cover;
    box-sizing: content-box;
    
    height: 200px;
    cursor: pointer;
     
}
.card>img {
    width: 100%;
    padding: 0;
    margin: 0;
    object-fit: cover;
    box-sizing: content-box;
    width: 100%;     
    cursor: pointer;
     
}
        
}