.sidebar {

	margin-top: $grid-line-height * 5;
	margin-bottom: $grid-line-height * 3;
	display: flex;
	flex-wrap: wrap;

	@include for-tablet {


	}

	@include for-desktop {

		margin-top: $grid-line-height * 10;

	}

}

.widget {

	width: 100%;
	flex-basis: 20rem;
	flex-grow: 1;
	padding: ( $grid-line-height / 2 ) ( $grid-gutter );
	overflow: hidden;
	margin-bottom: $grid-line-height * $grid-line-height-multiplier;
	@include wrap-text;

	.widget-title {

		@include modular-scale( gamma );
		margin-bottom: $grid-line-height / 2;
		font-weight: bold;

	}

	ul {

		list-style-type: none;
		margin: 0;
		padding: 0;

		ul {

			list-style-type: $style-list-style-type;
			margin-inline-start: $grid-gutter;

		}

		&:last-child {

			margin-bottom: 0;

		}

	}

	// These changes ensure iframes in widgets to not overflow the available
	// space. This is particularly appropriate in social media widgets with
	// fixed/ restricted widths.
	iframe {

		max-width: 100%;
		min-width: 0 !important;
		contain: strict;

	}

}
