@import '@resources/index.css';

.supt-section-functions {
	z-index: 3 !important; /* Override z-index from _section.css for all sections */

	&__inner {
		@extend %grid;
	}

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

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

	&__content {
		@extend %grid-column-gap, %grid-row-gap;
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		grid-auto-rows: auto;
		grid-template-rows: auto;

		@media (min-width: $sm-breakpoint) {
			grid-template-columns: repeat(10, 1fr);
		}
		@media (min-width: $md-breakpoint) {
			grid-template-columns: repeat(8, 1fr);
		}

		.supt-card-small {
			grid-column: 1 / span 12;

			@media (min-width: $sm-breakpoint) {
				grid-column: 1 / span 10;
			}
			@media (min-width: $md-breakpoint) {
				grid-column: 1 / span 8;
			}

			&:nth-child(6n + 1) {
				@media (min-width: $sm-breakpoint) {
					grid-column: 1 / span 5;
				}
				@media (min-width: $md-breakpoint) {
					grid-column: 1 / span 4;
				}
			}
			&:nth-child(6n + 2) {
				@media (min-width: $sm-breakpoint) {
					grid-column: 6 / span 5;
				}
				@media (min-width: $md-breakpoint) {
					grid-column: 5 / span 4;
				}
			}
			&:nth-child(6n + 3) {
				@media (min-width: $sm-breakpoint) {
					grid-column: 1 / span 6;
				}
				@media (min-width: $md-breakpoint) {
					grid-column: 1 / span 5;
				}
			}
			&:nth-child(6n + 4) {
				@media (min-width: $sm-breakpoint) {
					grid-column: 7 / span 4;
				}
				@media (min-width: $md-breakpoint) {
					grid-column: 6 / span 3;
				}
			}
			&:nth-child(6n + 5) {
				@media (min-width: $sm-breakpoint) {
					grid-column: 1 / span 4;
				}
				@media (min-width: $md-breakpoint) {
					grid-column: 1 / span 3;
				}
			}
			&:nth-child(6n + 6) {
				@media (min-width: $sm-breakpoint) {
					grid-column: 5 / span 6;
				}
				@media (min-width: $md-breakpoint) {
					grid-column: 4 / span 5;
				}
			}
			&:nth-child(odd):last-child {
				@media (min-width: $sm-breakpoint) {
					grid-column: 1 / span 6;
				}
				@media (min-width: $md-breakpoint) {
					grid-column: 1 / span 5;
				}
			}
		}
	}
}