quayso.sisvietnam.vn/public/frontend/scss/components/_card.scss

.service-card {
	position: relative;
	min-height: 230px;
	border: 1px solid $border-color;
	overflow: hidden;
	border-radius: 3px;

	.body {
		padding: 10px;

		img.icon {
			margin-top: 40px;
			width: 55px;
			margin-bottom: 25px;
			@include transition(all,.3s);
		}

		.title {

		}

		.subtitle {
			position: absolute;
			bottom: -100%;
			opacity: 0;
			visibility: hidden;
			@include transition(all,.3s);
		}
	}

	&:hover {
		.body {
			img.icon {
				margin-top: 5px;
				width: 45px;
				margin-bottom: 15px;
			}

			.subtitle {
				bottom: 7px;
				opacity: 1;
				visibility: visible;
			}
		}
	}
}


/*/ portfolio wrapper */
.portfolio-card {
	display: block;
	position: relative;
	overflow: hidden;

	.portfolio-card-img {
		width: 100%;
	}

	.portfolio-card-overlay {
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%,-50%);
		transform: translate(-50%,-50%);
		text-align: center;
		visibility: hidden;
		opacity: 0;
		background-image: linear-gradient(to top, lighten($primary, 40%) 0%, rgba(lighten($primary, 40%), .7) 99%, rgba(lighten($primary, 40%), .8) 100%);
		@include transition(all, .3s);
		width: 0;
		height: 0;
		border-radius: 50%;
		overflow: hidden;

		.portfolio-card-caption {
			display: block;
			position: absolute;
			top: 50%;
			left: 50%;
			-webkit-transform: translate(-50%,-50%);
			transform: translate(-50%,-50%);
			width: 100%;
		}

	}

	&:hover {
		.portfolio-card-overlay {
			opacity: 1;
			visibility: visible;
			width: 100%;
			height: 100%;
			border-radius: 0;
		}
	}
}
@include media-breakpoint-down(sm){
	.portfolio-card {
		margin-bottom: 30px;
	}

	.service-card {
		margin-bottom: 30px;
	}
}

/* Pricing card */
.pricing-wrapper {
	@include flex;

	.pricing-card {
		display: block;
		border: 1px solid $border-color;
		padding: 30px 15px;
		flex-grow: 1;
		flex-basis: 0;
		background: $white;
		@include transition(all,.3s);
		
		&-header {
			.pricing-card-icon {
				width: 70px;
				margin-bottom: 25px;
			}
		}

		&-footer {
			margin: 15px 0;
			span {
				font-size: calc(18px + (35 - 18) * ((100vw - 300px) / (1300 - 300)));	
				font-weight: 600;
				opacity: .8;

				&:first-child {
					position: relative;
					right: -6px;
					top: -6px;
					font-size: calc(15px + (25 - 15) * ((100vw - 300px) / (1300 - 300)));	
				}
			}
		}

		&-title {
			margin-bottom: 15px;
			font-size: calc(18px + (35 - 18) * ((100vw - 300px) / (1300 - 300)));	
						
		}

		&-list {
			p {
				margin-bottom: 12px;
				font-weight: 500;
				opacity: .6;

				i {
					color: $red;
				}
			}
		}

		&:hover {
			transform: translateY(-5px);
			border-radius: $card-border-radius !important;
		}

		&:first-child {
			border-radius: $card-border-radius 0 0 $card-border-radius;
		}
		&:nth-child(2) {
			margin-left: -1px;
			margin-right: -1px;
		}
		&:last-child {
			border-radius: 0 $card-border-radius $card-border-radius 0;
		}
	}

}
@include media-breakpoint-down(sm) {

	.pricing-wrapper {
		flex-direction: column;
	}
	.pricing-card {
		border-radius: $card-border-radius !important;
		margin: 0 0 15px 0 !important;
		width: 100%;
	}
}



/* testmonial card */
.testimonial-card {
	@include flex;
	align-items: center;
	margin-bottom: 30px;

	&-img-holder {
		min-width: 45px;
		max-width: 45px;
		z-index: 999;
	}

	&-img {
		background: $white;
		padding: 4px;
		width: 90px;
		height: 90px;
		border-radius: 50%;	
	}

	&-body {
		text-align: left;
		border: 1px solid $border-color;
		background: $white;
		padding: 20px 20px 20px 60px;
		border-radius: $card-border-radius;
	}

	&-title {
		margin-top: 20px;
		font-size: calc(14px + (18 - 14) * ((100vw - 300px) / (1300 - 300)));				
	}
}

/* blog wrapper */
.blog-card {
	@include flex;
	text-align: left;
	border: 1px solid $border-color;
	margin-bottom: 30px;
	border-radius: $card-border-radius;
	overflow: hidden;


	&-header {
		min-width: 350px;
		max-width: 350px;
	}

	&-img {
		border-radius: $card-border-radius 0 0 $card-border-radius;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	&-body {
		padding: 30px 20px 30px 30px;
	}

	&-title {
		font-weight: 100;
	}

	&-caption {
		margin: 15px 0 15px !important;

		i {
			display: inline-block;
			width: 15px;
		}

		a {
			margin-right: 10px;;
			color: #444;
			text-decoration: none;
			display: inline-block;
			font-weight: 600;
			opacity: .7;
			font-size: 13px;
		}
	}

	&-link {
		text-decoration: none;
		margin-top: 20px;
		display: block;
		font-size: 13px;
		i {
			position: relative;
			top: 1px;				
		}
	}
}
@include media-breakpoint-down (md) {
	.blog-card {
		flex-direction: column;		

		.blog-card-header {
			width: 100%;
			max-width: 100%;
			min-width: 100%;
		}
	}
}