✏️ Editing: _product.scss Writable

/* EVENT PRODUCT */
.ova-product {

.list-product {
		margin: 0;
		padding: 0;
		display: grid;
		grid-gap: 30px;

&.col-2 {
			grid-template-columns: repeat(2, 1fr);
		}

&.col-3 {
			grid-template-columns: repeat(3, 1fr);
		}

&.col-4 {
			grid-template-columns: repeat(4, 1fr);
		}

@media (max-width: 1200px) {
			&.col-4 {
				grid-template-columns: repeat(3, 1fr);
			}
		}

@media (max-width: 1024px) {
			&.col-3, &.col-4 {
				grid-template-columns: repeat(2, 1fr);
			}
		}

@media (max-width: 767px) {
			&.col-2, &.col-3, &.col-4 {
				grid-template-columns: auto;
			}
		}

.item {
			display: block;
			background-color: #F9F9F9;
			padding: 50px 30px 30px 30px;

&:hover {
				.image {
					.list-icon {
						@include transaction( all, 0.3s, linear );
						top: 50%;
						opacity: 1;
						visibility: visible;
					}
				}
			}

.image {
				position: relative;
				overflow: hidden;
				text-align: center;

.list-icon {
					@include transaction( all, 0.3s, linear );
					padding: 0;
					list-style: none;
					line-height: 1;

display: flex;
					align-items: center;
					column-gap: 9px;

position: absolute;
					top: 70%;
					left: 50%;
					transform: translate(-50%,-50%);
					opacity: 0;
					visibility: hidden;
					z-index: 1;

li {
						// YITH
						&.product-wishlist {
							.yith-wcwl-add-to-wishlist {
								margin: 0;
								span, a {
									font-size: 0;
								}
							}
						}
						a {
							display: inline-flex;
							justify-content: center;
							align-items: center;
							width: 40px;
							height: 40px;
							background: #fff;
							box-shadow: 0px 4px 18px rgba(0, 0, 0, 0.03);
							border-radius: 50%;
							&:hover {
								background-color: var(--primary);
								i {
									color: #fff;
								}
							}
							i {
								margin: 0;
								font-size: 14px;
								color: #000;
							}
						}
					}
					
				}
			}
		}

.info {
			text-align: center;
			.product-title {
				margin: 30px 0 0 0;
				font-size: 24px;
				font-weight: 600;
				text-transform: capitalize;
				a {
					color: #000;
				}
			}
			.price {
				color: #696A6D;
				font-size: 24px;
				font-weight: 500;
				margin: 0;
				del {
					opacity: 0.7;
				}
				ins {
					text-decoration: none; 
				}
			}
		}
	}
}

🔐 Sid Gifari File Manager Pro