@import '@resources/index.css';

.supt-section-cards-icon-small {
	&__inner {
		@extend %grid;
		grid-row-gap: 40px;

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

	&__headline {
		grid-column: 2 / span 10;
		text-align: center;

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

	&__content {
		@mixin clamp --supt-section-cards-icon-small-row-gap, 24, 80,
			$sm-breakpoint, $lg-breakpoint;
		--supt-section-cards-icon-small-column-gap: 24px;

		grid-column: 3 / span 8;

		display: grid;

		grid-template-columns: 1fr;
		grid-gap: var(--supt-section-cards-icon-small-row-gap)
			var(--supt-section-cards-icon-small-column-gap);

		@media screen and (min-width: $xs-breakpoint) {
			grid-column: 2 / span 10;
			grid-template-columns: repeat(2, 1fr);
			grid-row-gap: 40px;
		}

		@media screen and (min-width: $sm-breakpoint) {
			grid-template-columns: repeat(2, 1fr);
			grid-row-gap: 80px;
		}

		@media screen and (min-width: $lg-breakpoint) {
			grid-template-columns: repeat(3, 1fr);
		}
	}
}