.article:first-of-type {
	margin-top: 3.5em;
}

.article + .article {
	margin-top: 5em !important;
}

.m-auto {
	margin-left: auto;
	margin-right: auto;
}

.imgFrame {
	margin-top: 4em;
}

.list_comment li {
    position: relative;
    padding: 1.5em;
    margin: 0 0 1.5em;
    border: 3px solid rgb(123,137,226, .25);
    border-radius: .5em;
}

.flexList {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.flexList li {
	border-bottom: 1px solid #ddd;
	padding: 1em;
}

.list_comment li:before {
    content: "\f10d";
    display: block;
    position: absolute;
    left: .5em;
    top: -15px;
    padding: 0 5px;
    line-height: 1;
    font-weight: bold;
    font-family: "Font Awesome 6 Free";
    font-size: 1.5em;
    color: rgb(123, 137, 226, .5);
    background: #fff;   
}

@media print, screen and (min-width: 576px) {
	.flexList {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 1em 1.5em;
	}

	.flexList li {
		width: calc(calc(100% - 2em) / 2);
	}
}

@media print, screen and (min-width: 768px) {
	.flexList li {
		width: calc(calc(100% - 4em) / 3);
	}

	.imgFrame {
		gap: 2em;
	}

	.imgFrame > * {
		flex: 1;
	}
}

@media print, screen and (max-width: 767px) {
	.imgFrame .box + .box {
		margin-top: 1.5em;
	}
}