/**
 * The following styles get applied both on the front of your site
 * and in the editor.
 *
 * Replace them with your own styles or remove the file completely.
 */

.flex {
	display: flex
}

.fdc {
	flex-direction: column;
}

.aic {
	align-items: center
}

.jcc {
	justify-content: center
}

.jcsb {
	justify-content: space-between
}

.responsive-pros-cons {
	&__inner {
		gap: 20px;
		margin: 25px auto;

		@media(max-width: 768px) {
			flex-direction: column;
		}

		* {
			box-sizing: border-box;
		}
	}

	&__item {
		flex: 1;
		background: #fff;
		color: #000000;
		border: 1px solid #D9D9D9;
		border-radius: 2px;
		box-shadow: 0 0 16px rgba(0, 0, 0, .05);

		@media(min-width: 769px) {
			padding: 38px 45px;
		}

		@media(max-width: 768px) {
			padding: 30px 30px;
		}
	}

	&__header {
		margin-bottom: 1em;
	}

	&__title {
		font-size: 1.3em;
		font-weight: 700;
		margin: 0;
	}

	&__list {
		gap: .85em;
		margin: 0;
		padding: 0;
		list-style: none;

		li {
			font-size: 1em;
			line-height: 1.75em;

			svg {
				flex-shrink: 0;
				width: 22px;
				height: 22px;
				margin-top: 3px;
			}
		}
	}
}

// Design One
.responsive-pros-cons--design-one {
	.responsive-pros-cons {

		&__header {
			gap: 12px;
		}

		&__icon {
			svg {
				width: 44px;
				height: 44px;
				margin-top: 0;
			}
		}

		&__list {
			gap: .5em;
			padding: 0 0 0 19px;

			li {
				padding-left: 25px;
				position: relative;

				&:before {
					content: '';
					border-radius: 50%;
					display: inline-block;
					height: 7px;
					left: 0;
					position: absolute;
					top: 12px;
					width: 7px;
				}
			}

			&-pros li:before {
				background: #4CAF50;
			}

			&-cons li:before{
				background: #EF0856;
			}
		}
	}
}

// Design Two
.responsive-pros-cons--design-two {
	.responsive-pros-cons {
		&__list {
			li {
				gap: 10px;
			}
		}
	}
}

// Design Three
.responsive-pros-cons--design-three {
	.responsive-pros-cons {
		&__inner {
			@media(min-width: 769px) {
				gap: 0;
				box-shadow: 0 0 16px rgba(0, 0, 0, 0.05);
			}
		}

		&__item {
			padding: 0;
			border-top: none;

			@media(min-width: 769px) {
				box-shadow: none;
			}

			&-pros {
				@media(min-width: 769px) {
					border-radius: 2px 0 0 2px;
				}
			}

			&-cons {
				@media(min-width: 769px) {
					border-radius: 0 2px 2px 0;
					border-left: none;
				}
			}
		}

		&__content {
			@media(min-width: 769px) {
				padding: 20px 45px 30px;
			}

			@media(max-width: 768px) {
				padding: 20px 30px 30px;
			}
		}

		&__header {
			padding: 1em;
			margin: 0;
			text-align: center;

			&-pros {
				background: #4CAF50;
				margin-left: -1px;

				@media(min-width: 769px) {
					border-radius: 2px 0 0 0;
				}

				@media(max-width: 768px) {
					margin: 0 -1px;
					border-radius: 2px 2px 0 0;
				}
			}

			&-cons {
				background: #EF0856;
				margin-right: -1px;

				@media(min-width: 769px) {
					border-radius: 0 2px 0 0;
				}

				@media(max-width: 768px) {
					margin: 0 -1px;
					border-radius: 2px 2px 0 0;
				}
			}
		}

		&__title {
			color: #fff;
		}

		&__list {
			li {
				gap: 10px;
			}
		}
	}
}

// Design Four
.responsive-pros-cons--design-four {
	.responsive-pros-cons {
		&__inner {
			gap: 30px;
		}

		&__item {
			border: none;
			box-shadow: none;
			background: none;
			padding: 0;
		}

		&__header {
			text-align: center;
		}

		&__list {
			li {
				gap: 10px;
				color: #fff;
				box-shadow: 0 0 16px rgba(0, 0, 0, .05);
				padding: 15px;
				border-radius: 2px;
			}

			&-pros li {
				background: #4CAF50;
			}

			&-cons li {
				background: #EF0856;
			}
		}
	}
}