@import '@resources/index.css';

.supt-section-cards-logo-text {
	&__inner {
		@extend %grid;
		row-gap: 32px;

		@media screen and (min-width: $sm-breakpoint) {
			row-gap: 56px;
		}
	}

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

		@media screen and (min-width: $sm-breakpoint) {
			grid-column: 2 / span 10;
		}

		@media screen and (min-width: $ml-breakpoint) {
			grid-column: 3 / span 8;
		}
	}

	&__headline {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	& h2.supt-section__title {
		@extend %t-ml;
		text-align: left;
		margin: 0;
	}

	& .supt-section__introduction {
		@extend %t-sm-normal;
		color: $color-interface-grey-80;
	}

	&__content {
		display: flex;
		flex-direction: column;
		gap: 12px;

		@media screen and (min-width: $xxs-breakpoint) {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
			gap: 24px;
		}

		@media screen and (min-width: $ml-breakpoint) {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 24px;
		}
	}
}