@use "../../../src/scss/blocks/vars.scss" as *;
.before-after{
	// max-width: 630px;
	.wysiContent{
		width: 100%;
		font-size: 1.125rem;
		ul {
			li {
				padding: 10px 0;
			}
		}
	}
	.imagesWithLabel{
		display: flex;
		justify-content: center;
		flex-wrap:wrap;
		gap: 75px 150px;
		&.multiple{
			flex-direction: column;
		}
		.component{
			display: flex;
			flex-direction:column;
			align-items: center;
			.label{
				width: fit-content;
				font-size: 1.25rem;
				padding:0.625rem 1.875rem;
				border-radius: 62px;
				margin-bottom: 16px;
				&.before{
					color: #7C7C7C;
					background-color: #EDEAEA;
				}
				&.after{
					background-color: #31AE53;
					color: #ffffff;
					position: relative;
					&::after, &::before {
						content: '';
						height: 1.625rem;
						width: 1.813rem;
						background: url('./tori-stars.png');
						z-index: +3;
						position: absolute;
					}
					&::after{
						bottom: 0;
						right: -1.6rem;
					}
					&::before{
						top: -1rem;
						left: -0.9rem;
					}
				}
			}
			.multiple-images{
				display:flex;
				flex-wrap:wrap;
				gap: 32px;
				justify-content: space-around;
			}
			.before-after-img{
				box-shadow: 0px 4px 14px 0px rgba(119, 115, 115, 0.17);
				border-radius: 24px;
			}
		}
	}

	.align-center {
		margin: 0 auto;
	}
	.align-right {
		margin-left: auto;
	}
	.align-left {
		margin-right: auto;
	}
}

.stars{
	background: url('./tori-stars.png');
}