em modo responsivo configurar o .text-content e o .image-content em colunas centralizadas

@import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&display=swap");
#hero {
	height: 100vh !important;
	overflow: hidden;
	position: relative;
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	&:before {
		content: "";
		background: rgba(34, 34, 34, 0.336);
		position: absolute;
		bottom: 0;
		top: 0;
		left: 0;
		right: 0;
	}

	.slider {
		position: relative;
		margin-top: 140px;
		.slide {
			z-index: 1;
			opacity: 0;
			/* Inicialmente invisível */
			transition: opacity 0.5s ease;
			/* Transição suave */
			position: absolute;
			/* Posicionamento absoluto para sobrepor slides */
			top: 0;
			left: 0;
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			&.active {
				opacity: 1;
				/* Slide ativo visível */
				z-index: 2;
				/* Traz o slide ativo para frente */
			}
			.caption {
				text-align: center;
				// line-height: 1rem;
				width: 100%;
				margin-bottom: 20px;
				h1 {
					opacity: 0;
					transform: translateY(-20px);
					animation: fadeInDown 0.5s ease forwards;
					font-size: 2.1rem;
				}

				p {
					opacity: 0;
					transform: translateY(-20px);
					animation: fadeInDown 0.5s ease forwards 0.3s;
					font-size: 1.4rem;
				}
				@keyframes fadeInDown {
					from {
						opacity: 0;
						transform: translateY(-20px);
					}

					to {
						opacity: 1;
						transform: translateY(0);
					}
				}
			} //.caption
			.content {
				display: flex;
				flex: 1;
				justify-content: space-between;
				flex-wrap: wrap;
				gap: 20px;
				padding: 10px 3%;
				align-items: center;
				.text-content {
					flex: 1;
					display: flex;
					justify-content: end;
					align-items: center;
					text-align: justify;
					font-size: 1.1em;
					padding: 0 80px;
					ul {
						line-height: 2.1rem;
						font-size: 1.1rem;
						li i {
							padding-right: 5px;
						}
					} //ul
				} //.text-content
				.image-content {
					flex: 1;
					display: flex;
					justify-content: start;
					align-items: center;
				} //.image-content
			} //.content
		} //.slide
	} //.slider
	.details {
		position: absolute;
		bottom: 60px; // Ajuste a distância do rodapé
		left: 50%;
		transform: translateX(-50%); // Centraliza horizontalmente
		text-align: center;
		font-weight: 600;
		font-size: 13px;
		width: 100%; // Garante que o conteúdo ocupe a largura total

		.btn-get {
			letter-spacing: 0.5px;
			padding: 12px 30px;
			border-radius: 18px;
			color: var(--cl-default);
			border: 2px solid var(--cl-primary);
			cursor: pointer;

			&:hover {
				color: var(--cl-hover);
				border: 2px solid var(--cl-secondary);
			}
		}
	}

	.controls {
		position: absolute;
		top: 50%;
		left: 0;
		right: 0;
		display: flex;
		justify-content: space-between;
		transform: translateY(-50%);
		pointer-events: none;
	} //.controls

	.controls .prev,
	.controls .next {
		pointer-events: all;
		cursor: pointer;
		font-size: 1.2em;
		color: var(--cl-default);
		// background: rgba(255, 255, 255, 0.7);
		padding: 10px;
		border-radius: 50%;
		transition: background 0.3s ease;
	}

	.controls .prev:hover,
	.controls .next:hover {
		background: rgba(255, 255, 255, 1);
	}

	.details-ant {
		display: flex;
		text-align: center;
		justify-content: center;
		margin-top: 40%;
		font-weight: 600;
		font-size: 13px;
		position: relative;
		.btn-get {
			letter-spacing: 0.5px;
			padding: 12px 30px;
			border-radius: 18px;
			color: var(--cl-default);
			border: 2px solid var(--cl-primary);
			cursor: pointer;
			&:hover {
				color: var(--cl-hover);
				border: 2px solid var(--cl-secondary);
			}
		}
	} //details
} //#hero