.galary-block {
  display: flex;
  justify-content: space-between;
  gap: 60px;
  margin: 0 auto;
  max-width: 1640px;
}
.galary-menu {
  position: relative;
}
.galary-titles {
  display: flex;
  height: fit-content;
  flex-direction: column;
  gap: 20px;
}

.gallery-title {
  display: block;
  padding: 9px 20px;
  font-size: 18px;
  min-width: 250px;
  border: 1px solid #000000;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.5s ease all;
}

.gallery-title:hover {
  border: 1px solid #006363;
  background-color: #006363;
  color: #ffffff;
}

.gallery-title.active {
  border: 1px solid #006363;
  background-color: #006363;
  color: #ffffff;
}

.gallery-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 20px;
}

.gallery-container {
  display: none;
}

.gallery-container.active {
  display: grid;
}

.gallery-item {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 300px;
  max-height: 250px;
}

.gallery-image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 300px;
  max-height: 250px;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 1281px) {
  .gallery-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
  }
  .gallery-container {
    display: none;
  }
  
  .gallery-container.active {
    display: grid;
  }
  
}

@media (max-width: 981px) {
  .galary-block {
    gap: 30px;
  }
  .gallery-title {
    padding: 9px 20px;
    font-size: 16px;
    min-width: 180px;
  }
  .gallery-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .gallery-container {
    display: none;
  }
  
  .gallery-container.active {
    display: grid;
  }
  
}

@media (max-width: 640px) {
    .galary-block {
      flex-direction: column;
    }
    .galary-titles {
        display: flex;
        overflow-x: scroll;
        height: fit-content;
        flex-direction: row;
        gap: 20px;
    }
    .gallery-title{
        display: flex;
        align-items: center;
        align-content: center;
        justify-content: center;
        text-align: center;
    }
}