.gallery-details {display: grid;width: 100%;grid-column-gap: 10px;grid-row-gap: 10px;grid-template-columns: repeat(4, minmax(0px, 1fr));}
.gallery-details.video-gallery {grid-column-gap: 15px;grid-row-gap: 15px;grid-template-columns: repeat(3, minmax(0px, 1fr));}
.video-gallery.gallery-details .view-icon {opacity: 1;visibility: visible;background: transparent;border-radius: 0;width: 80px;height: auto;}
.video-gallery.gallery-details a:before {content: "";background: transparent;}
.video-item h4 {background: var(--secondary-color);border-radius: 0 0 10px 10px;color: var(--black-color);font-size: 15px;font-weight: 600;text-align: center;padding: 15px 15px;text-overflow: ellipsis;overflow: hidden;width: 100%;white-space: nowrap;}
.view-icon {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);font-size: 20px;width: 50px;height: 50px;line-height: 50px;border-radius: 50%;text-align: center;background: #fff;color: var(--primary-color);opacity: 0;visibility: hidden;}
.gallery-img-img {height: 250px;width: 100%;object-fit: cover;border-radius: 10px;}
.gallery-details a {position: relative;display: block;}
.video-gallery .gallery-img-img {border-radius: 10px 10px 0 0;}
.gallery-details a:before {content: "";background: rgba(237, 145, 0, 0.8);border-radius: 10px;position: absolute;top: 0;left: 0;width: calc(100% - 0px);height: calc(100% - 0px);opacity: 0;visibility: hidden;transition: var(--transition);}
.gallery-details a:hover:before {opacity: 1;visibility: visible;}
.gallery-details a:hover .view-icon {opacity: 1;visibility: visible;}

@media only screen and (max-width:768px) {
.gallery-section {grid-template-columns: repeat(1, minmax(0px, 1fr));}gallery-head .main-head {font-size: 24px;margin-bottom: 24px;}.gallery-details {grid-template-columns: repeat(1, minmax(0px, 1fr));}
}