.mailing-lists {
	max-width: 680px;
	margin: 0 auto;

	.mailing-lists__manage-link {
		text-align: center;
	}
}

.mailing-lists__header {
	position: relative;
	margin: 40px 24px;
	padding-left: 40px;

	@include breakpoint-deprecated( ">480px" ) {
		padding-top: 8px;
		padding-left: 80px;
	}

	.gridicon {
		position: absolute;
		top: 0;
		left: 0;

		&.gridicons-mail {
			fill: var(--color-neutral-50);

			@include breakpoint-deprecated( "<480px" ) {
				height: 24px;
				width: 24px;
			}
		}

		&.gridicons-cross {
			top: 32px;
			left: 40px;
			fill: var(--studio-white);
			background: var(--color-neutral-70);
			border-radius: 100%;
			box-shadow: 0 0 0 3px var(--color-neutral-0);

			@include breakpoint-deprecated( "<480px" ) {
				height: 16px;
				width: 16px;
				top: 16px;
				left: 16px;
			}
		}
	}

	h1 {
		font-size: $font-title-medium;
		line-height: 1.2;
		color: var(--color-neutral-70);

		@include breakpoint-deprecated( ">480px" ) {
			font-size: $font-title-large;
		}
	}

	p {
		color: var(--color-neutral-50);
		margin: 0;
	}
}

.mailing-lists__details {
	padding: 24px;
	min-height: 88px;

	@include breakpoint-deprecated( ">480px" ) {
		padding-right: 154px;
	}

	h4 {
		font-weight: 600;
		color: var(--color-neutral-50);
		font-size: $font-body;
	}

	p {
		color: var(--color-neutral-40);
		margin: 0;
		font-size: $font-body;
	}

	.button {
		@include breakpoint-deprecated( "<480px" ) {
			margin-top: 24px;
			box-sizing: border-box;
			width: 100%;
		}
		@include breakpoint-deprecated( ">480px" ) {
			position: absolute;
			top: 24px;
			right: 24px;
		}
	}
}
