/**
 * 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.
 */
.affr-single.wp-block-affr {
	margin-bottom: 20px;
	background-color: var(--affr-box-bg-color);

	.affr-pros {
		margin-bottom: 20px;
	}

	.affr-button {
		justify-content: flex-start;

		@container (max-width: 680px) {
			justify-content: center;
		}
	}

	.affr-list {
		ul {
			max-width: 100%;
		}
	}

	.affr-terms {
		@container (max-width: 680px) {
			text-align: center;
		}
	}
}

.affr-single-cwrap {
	display: flex;
	flex-wrap: wrap;
}

.affr-single-cthumb {
	width: 32%;
	position: relative;

	@container (max-width: 680px) {
		width: 100%;
	}
}

.affr-single-ccontent {
	flex: 1 0 0%;
	padding: 25px;
	display: flex;
	gap: 20px;
	flex-direction: column;

	.affr-single-cwrap {
		@container (max-width: 800px) {
			flex-direction: column;
		}
	}
}

.affr-single-rating-bonus {
	display: flex;
	align-items: flex-start;
	gap: 40px;

	@container (max-width: 680px) {
		flex-direction: column;
		gap: 20px;
		text-align: center;
		align-items: center;
	}
}

.affr-single-terms {
	width: 100%;
	padding: 15px;
}

.affr-single-cpros-cons {
	width: 50%;

	@container (max-width: 800px) {
		width: 100%;
	}
}

.affr-single-cdetails {
	width: 50%;
	padding-left: 20px;

	@container (max-width: 800px) {
		padding-left: 0;
		margin-top: 20px;
		width: 100%;
	}
}