.ova-audio-host{

	&.archive-audio-host {
		margin-bottom: 115px;
		@media (max-width: 1024px) {
			margin-bottom: 75px;
		}
	}
	
	.content {
		display: grid;
		grid-gap: 30px;
		  
		&.four_column{
		  	grid-template-columns: 1fr 1fr 1fr 1fr;	
		  	@media( max-width: 1200px ){
				grid-template-columns: 1fr 1fr;
			}
			@media( max-width: 767px ){
				grid-template-columns: auto;	
			}
		}

		&.three_column{
		  	grid-template-columns: 1fr 1fr 1fr;
		  	@media( max-width: 1200px ){
				grid-template-columns: 1fr 1fr;
			}
			@media( max-width: 767px ){
				grid-template-columns: auto;	
			}
		}

		&.two_column{
		  	grid-template-columns: 1fr 1fr;
		  	grid-gap: 50px;
		  	@media( max-width: 767px ){
				grid-template-columns: auto;	
			}
		}

		.item-audio-host {

			&:hover {
				.img {
					img {
						transition: all .4s ease;
						transform: translateY(-10px);  
					}
					.list-icon {
                        transition: all .5s ease;
						bottom: 30px;
						opacity: 1;
						visibility: visible;
					}
				}
				.info {
					.share-button {
						transition: all .5s ease;
                        i {
                        	transition: all .5s ease;
                         	-webkit-transition-delay: 0.1s;
						    transition-delay: 0.1s;
						    -webkit-transform: scale(0.95) rotateY(360deg);
						    transform: scale(0.95) rotateY(360deg);
                        }
					}
				}
			}

			.img {
				position: relative;
				background-color: var(--primary); 
				margin-bottom: 25px;
				img {
					transition: all .4s ease;
					transform: translateY(0); 
					display: block;
					width: 100%;
				}

				.list-icon {
					transition: all .5s ease;
					opacity: 0;
					visibility: hidden;
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%); 
					text-align: center;
                    margin: 0;
					padding: 0 10px; 
					list-style-type: none; 
					display: inline-flex;
				    justify-content: center;
				    align-items: center;
				    background-color: #fff;
					.item {
						transition: all .3s ease;
						display: inline-flex;
						justify-content: center;
						align-items: center;
						width: 40px;
						height: 40px;
						&:hover {
							transition: all .3s ease;
							background-color: rgb(244, 244, 244);
							i {
								color: var(--primary); 
							}
						}
						a {
							display: inline-flex;
							justify-content: center;
							align-items: center;
						    width: 100%;
						    height: 100%;
						}
	                    i {
	                    	transition: all .3s ease;
	                    	font-size: 15px; 
	                    	color: var(--heading);  
	                    	display: inline-flex;
	                    }
					}
				}
			}

			.info {
				text-align: center;
				.name {
					margin: 0;
					font-weight: 700;
	                font-size: 24px;
	                line-height: 1.5; 
	                color: var(--heading); 
				}

	            .job {
					margin: 0;
					font-weight: 700;
	                font-size: 14px;
	                line-height: 1.5; 
	                color: var(--primary); 
	                text-transform: uppercase;
				}
			}

		}
	}			
	
}