.accordion {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	.section {
		background-color: var(--color-white);
		border-radius: 1rem;
		padding: 1.5rem;
		&.active .heading i {
			transform: rotateZ(180deg);
		}

		.heading {
			width: 100%;
			font-size: 1.25rem;
			font-weight: 700;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0;

			i {
				background: var(--color-gray-60);
				border-radius: 2rem;
				display: flex;
				height: 2rem;
				width: 2rem;
				justify-content: center;
				align-items: center;
				transition: all 0.2s linear;

				svg {
					width: 1ch;
					height: 1ch;
					margin-right: -2px;
					margin-top: 2px;
				}
			}
		}
		.body-wrap {
			overflow: hidden;
			height: 0;
			.body {
				padding-top: 1rem;
			}
		}
	}
}