/* Cards */
.cards-component {
	counter-reset: steps;
	.row{
		margin-left: -15px;
		margin-right: -15px;
		row-gap: 30px;
		display: flex;
		& > *{
			display: flex;
			margin-top: 0;
		}
	}
	.single-box {
		background: var(--color-background-2);
		border-radius: 20px;
		padding: 40px;
		color: var(--color-text);
		display: flex;
		flex-flow: column;
		text-align: center;
		width: 100%;
		img{
			margin-bottom: 10px;
		}
		.h4{
			margin-bottom: 10px;
		}
		.bt{
			margin-top: 20px;
		}
		&.card-color-bege{
			background: var(--color-background-2);
			color: var(--color-text);
		}
		&.card-color-vinho{
			background: var(--color-text);
			color: var(--color-background-soft);
		}
		&.card-color-rosa{
			background: var(--color-secondary);
			color: var(--color-background-soft);
		}
		&.card-style-outline{
			background: transparent;
			border: 1px solid currentColor;
		}
		&.card-style-outline.card-color-bege{
			color: var(--color-background-2);
		}
		&.card-style-outline.card-color-vinho{
			color: var(--color-text);
		}
		&.card-style-outline.card-color-rosa{
			color: var(--color-secondary);
		}
		&.card-align-left{
			text-align: left;
		}
		&.card-align-center{
			text-align: center;
		}
		@media(max-width: 991px){
			padding: 30px;
		}

		&.nobg1{
			background: transparent;
			border:1px solid var(--color-card-border);
			padding: 25px;
			
		}

		&.icone-lateral{
			flex-flow: row nowrap;
			align-items: center;
			gap: 15px;
			align-items: flex-start;
			padding: 30px;
			background: var(--color-card-translucent);

			figure{
				width: 24px;
				flex: 0 0 24px;
				margin: 0;

				img{
					display: block;
					width: 100%;
					height: auto;
					margin: 0;
				}
			}

			.info{
				min-width: 0;
				flex: 1 1 auto;

				h3{
					color: var(--color-pink);
					font-size: 20px;
					font-weight: 600;
				}
			}

			@media(max-width: 767px){
				padding: 20px;
				border-radius: 15px;
			}
		}

		
		&.steps{
			padding: 30px;
			position: relative;
			counter-increment: steps;
			&:before{
				content: "0 " counter(steps);
				position: absolute;
				right: 30px;
				top: 25px;
				font-family: var(--font-accent);
				color: var(--color-blue);
				font-weight: 400;
                letter-spacing: -.2rem;
                font-size: 42px;
			}
			h3{
				color: var(--color-blue);
			}
			&.step1{
				background: var(--color-white);
			}
			&.step3{
				background: var(--color-sand);
			}
		}



	}
}