@import '@resources/index.css';

.supt-section-faq {
	&__inner {
		@extend %grid;
		grid-template-rows: auto 1fr;
	}

	&__headline,
	&__content {
		grid-column: 1 / span 12;

		@media (min-width: $xs-breakpoint) {
			grid-column: 2 / span 10;
		}
		@media (min-width: $md-breakpoint) {
			grid-column: 2 / span 4;
		}
	}

	&__headline {
		margin-bottom: 30px;
	}

	&__content {
		order: 1;
		margin-top: 20px;
		@media (min-width: $md-breakpoint) {
			order: unset;
			margin-top: 0px;
		}
	}

	&__questions {
		grid-column: 1 / span 12;

		@mixin clamp margin-top, -24, -32, $xxs-breakpoint, $lg-breakpoint;

		@media (min-width: $xs-breakpoint) {
			grid-column: 2 / span 10;
		}
		@media (min-width: $md-breakpoint) {
			grid-column: 7 / span 5;
			grid-row: 1 / span 2;
		}
	}

	.supt-section__title {
		text-align: left;
		margin-bottom: 0;
	}

	.supt-button-primary {
		margin-top: 16px;
		color: $color-interface-grey-100;
		--card-background-color: var(--section-current-color);
	}
}