.gallery {
  display: grid;
  /*grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));*/
   grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  padding: 0;
  /*max-width:1100px;*/
  width:100%;
  margin:0 auto;
}


 
/********************/

.gallery .card, .gallery .item {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  object-fit: cover;
  height:300px;
  border:4px solid var(--white);
  transition: all 0.4s ease;
}

.gallery .card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease; 
  
}
 .gallery .item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
 }
.gallery .item:hover img, .gallery .card:hover video  {
  transform: scale(1.1);
}

.subline {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 15px;
  color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
  font-size: 14px;
}
/**********/
.play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--primary-color);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color:var(--white);
  
 
}
.play:before{
	width:50px;
	height:50px;
	left:0;
	top:0;
	position:absolute;
	content:'\f144';
	text-align:center;
	display:flex;
	justify-content: center;
	align-items: center;
	color:var(--white);
	font-family: 'Font Awesome 6 Free';
	font-size:35px;
}
/**********/

/**********/
.zoom {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
    background: var(--primary-color);
	border-radius: 50%;
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
    color:var(--white);
	background-image: url(../images/icons/zoom-icon.svg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size:50%;
	z-index:1;
 
}
 
/**********/


 .modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease;
}

.modal.show {
  opacity: 1;
  visibility: visible;
}

/* Zoom animation */
.modal-content {
  max-width: 90%;
  transform: scale(0.7) translateY(40px);
  opacity: 0;
  background-color:#000;
  transition: transform 0.35s ease, opacity 0.35s ease;
}

.modal.show .modal-content {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.modal img, .modal video {
  width: 100%;
  max-height: 80vh;
 
}

.close {
  position: absolute;
  top: 20px;
  right: 30px;
  color: var(--white);
  font-size:40px;
  cursor: pointer;
  transition: all 0.4s ease;
  
}

.close:hover {
 color: rgba(255, 255, 255, 0.5);
 
}


@media(max-width:600px){
  .gallery {
    /*grid-template-columns: 1fr;*/
	grid-template-columns: repeat(2, 1fr);
  }
  
.gallery .card, .gallery .item {
  height:120px;
 
}
}