@media screen and (max-width:834px){
  
.gallery-container {
    display: grid;
     grid-template-columns: repeat(auto-fit,minmax(40%,  1fr));
      gap: 15px;
        max-width: 90%vw;
         margin: 0 auto;
          margin-top: 25px;}
.gallery-item img {
    width: 100%;
     aspect-ratio: 1 / 1;
      object-fit: cover;
       border: 4px solid rgb(75, 43, 19);
        border-radius: 8px;
         background-color: rgb(121, 175, 118);
          transition: 0.3s ease;
           box-shadow: 0 4px 8px rgba(49, 45, 45, 0.4);}     
.gallery-item video{ 
      width: 100%;
       aspect-ratio: 1/1;
        object-fit: cover;
         border: 4px solid rgb(75, 43, 19);
          border-radius: 8px;
           background-color: rgb(121, 175, 118);
            transition: 0.3s ease;
             box-shadow: 0 4px 8px rgba(49, 45, 45, 0.4);}
.gallery-item img:hover {
    transform: scale(1.04);
    z-index: 1;}
 .gallery-item video:hover{
    transform: scale(1.04);
    z-index: 1;}}
.gallery-container {
    display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 15px;
        max-width: 90vw;
         margin: 0 auto;
          margin-top: 25px;}
.gallery-item img {
    width: 100%;
     height: 250px;
      object-fit: cover;
       border: 4px solid rgb(75, 43, 19);
        border-radius: 8px;
         background-color: rgb(121, 175, 118);
          transition: 0.3s ease;
           box-shadow: 0 4px 8px rgba(49, 45, 45, 0.4);}     
.gallery-item:has(video){
   grid-column: span 2;}
    .gallery-item video{ 
      width: 100%;
       height: 250px;
        object-fit: cover;
         border: 4px solid rgb(75, 43, 19);
          border-radius: 8px;
           background-color: rgb(121, 175, 118);
            transition: 0.3s ease;
             box-shadow: 0 4px 8px rgba(49, 45, 45, 0.4);} 
.gallery-item img:hover {
    transform: scale(1.2);
    z-index: 1;}
 .gallery-item video:hover{
    transform: scale(1.2);
    z-index: 1;}
  @media screen and (min-width:1200px){
    .gallery-container{
      display: grid;
       grid-template-columns: repeat(auto-fit,minmax(20%,  1fr));
        gap: 15px;
         max-width: 1200px;
          margin: 0 auto;
           margin-top: 25px;}}