/* ============================================================================
   Display utilities
   - d-none removes content from layout entirely.
   - invisible hides content without removing its space.
   - Responsive variants follow the project breakpoints and add xl / xxl.
   ============================================================================ */

/* Base utilities ----------------------------------------------------------- */
.d-none {
	display: none !important;
}

.d-inline {
	display: inline !important;
}

.d-inline-block {
	display: inline-block !important;
}

.d-block {
	display: block !important;
}

.d-flex {
	display: flex !important;
}

.d-inline-flex {
	display: inline-flex !important;
}

.d-grid {
	display: grid !important;
}

.d-table-cell {
	display: table-cell !important;
}

/* Visibility utility ------------------------------------------------------- */
/* Keeps the element in the layout, but makes it invisible. */
.invisible {
	visibility: hidden !important;
}

/* Small and up (>= 480px) ------------------------------------------------- */
@media (min-width: 480px) {
	.d-sm-none { display: none !important; }
	.d-sm-inline { display: inline !important; }
	.d-sm-inline-block { display: inline-block !important; }
	.d-sm-block { display: block !important; }
	.d-sm-flex { display: flex !important; }
	.d-sm-inline-flex { display: inline-flex !important; }
	.d-sm-grid { display: grid !important; }

	/* Keeps space, hides paint, from the small breakpoint up. */
	.d-sm-invisible { visibility: hidden !important; }
}

/* Medium and up (>= 850px) ------------------------------------------------ */
@media (min-width: 850px) {
	.d-md-none { display: none !important; }
	.d-md-inline { display: inline !important; }
	.d-md-inline-block { display: inline-block !important; }
	.d-md-block { display: block !important; }
	.d-md-flex { display: flex !important; }
	.d-md-inline-flex { display: inline-flex !important; }
	.d-md-grid { display: grid !important; }
	.d-md-table-cell { display: table-cell !important; }

	/* Keeps space, hides paint, from the medium breakpoint up. */
	.d-md-invisible { visibility: hidden !important; }
}

/* Large and up (>= 1024px) ------------------------------------------------ */
@media (min-width: 1024px) {
	.d-lg-none { display: none !important; }
	.d-lg-inline { display: inline !important; }
	.d-lg-inline-block { display: inline-block !important; }
	.d-lg-block { display: block !important; }
	.d-lg-flex { display: flex !important; }
	.d-lg-inline-flex { display: inline-flex !important; }
	.d-lg-grid { display: grid !important; }

	/* Keeps space, hides paint, from the large breakpoint up. */
	.d-lg-invisible { visibility: hidden !important; }
}

/* Extra large and up (>= 1200px) ----------------------------------------- */
@media (min-width: 1200px) {
	.d-xl-none { display: none !important; }
	.d-xl-inline { display: inline !important; }
	.d-xl-inline-block { display: inline-block !important; }
	.d-xl-block { display: block !important; }
	.d-xl-flex { display: flex !important; }
	.d-xl-inline-flex { display: inline-flex !important; }
	.d-xl-grid { display: grid !important; }

	/* Keeps space, hides paint, from the extra-large breakpoint up. */
	.d-xl-invisible { visibility: hidden !important; }
}

/* Extra extra large and up (>= 1400px) ----------------------------------- */
@media (min-width: 1400px) {
	.d-xxl-none { display: none !important; }
	.d-xxl-inline { display: inline !important; }
	.d-xxl-inline-block { display: inline-block !important; }
	.d-xxl-block { display: block !important; }
	.d-xxl-flex { display: flex !important; }
	.d-xxl-inline-flex { display: inline-flex !important; }
	.d-xxl-grid { display: grid !important; }

	/* Keeps space, hides paint, from the extra-extra-large breakpoint up. */
	.d-xxl-invisible { visibility: hidden !important; }
}