.woocommerce-marketing-overview-welcome-card {
	position: relative;

	.components-card__body {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		padding: 22px;

		@include breakpoint( '>600px' ) {
			flex-wrap: nowrap;
		}

		@include breakpoint( '>960px' ) {
			padding: 32px 108px;
		}
	}

	&__hide-button {
		display: flex;
		align-items: center;
		padding: 8px;
		margin: 0;
		border: none;
		background: none;
		color: $gray-700;
		overflow: hidden;
		border-radius: 4px;
		position: absolute;
		top: 10px;
		right: 10px;

		// Ensure that even SVG icons that don't include the .dashicon class are colored.
		svg {
			fill: currentColor;
			outline: none;
		}

		&:not(:disabled):not([aria-disabled='true']):not(.is-default):hover {
			@include button-style__hover;
		}

		&:not(:disabled):not([aria-disabled='true']):not(.is-default):active {
			@include button-style__active;
		}

		&[aria-disabled='true']:focus,
		&:disabled:focus {
			box-shadow: none;
		}
	}

	h3 {
		font-size: 20px;
		line-height: 26px;
		font-weight: normal;
		text-align: center;
		margin: 1em 0 0;

		@include breakpoint( '>600px' ) {
			text-align: left;
			margin: 0 0 0 20px;
		}

		@include breakpoint( '>960px' ) {
			font-size: 24px;
			line-height: 32px;
		}
	}

	img {
		width: 231px;
		flex: none;
	}
}