/***** Footer *************/
footer {
	display: grid;
	justify-items: center;
	background-color: var(--clr-dark);

	.articles {
		display: grid;
		justify-content: center;
		width: 100%;
		background-image: url(../images/bg-chart-graphic-wide.jpg);
		background-size: cover;
		background-position: center bottom;

		.articles-content {
			display: flex;
			flex-wrap: wrap;
			gap: 2.5rem;
			justify-content: center;
			max-width: 80rem;
			padding-block: 5.625rem 4.625rem;
			padding-inline: 1rem;
		}

		article {
			flex-basis: 18rem;
			flex-grow: 1;
			flex-shrink: 1;
			max-width: 22.5rem;
			min-width: min-content;
			padding: 1.875rem 1.5625rem 2.5rem;
			background-color: hsl(0, 0%, 100%);
			border: 1px solid #dadada;
			display: grid;
			grid-template-rows: auto 1fr auto;
			gap: 2.5rem;

			.article-link {
				display: grid;
				grid-template-rows: auto auto 1fr auto;

				&:hover,
				&:focus {
					text-decoration: none;
	
					h4,
					.read-more {
						text-decoration: underline;
					}
				}
			}

			h3 {
				font-weight: 500;
				font-size: 1.625rem;
				color: hsl(0, 0%, 0%);
				text-align: center;
				margin-block: 0;
				min-height: 2.5em;
				align-content: end;
			}

			h4 {
				font-weight: 400;
				font-size: 0.9375rem;
				line-height: 1.5;
				margin-block: 0 0.8em;
			}

			.posted-date {
				display: block;
				font-family: var(--ff-secondar);
				font-weight: 400;
				font-size: 0.6875rem;
				color: hsl(0, 0%, 0%);
				margin-bottom: 1em;
			}

			p {
				font-weight: 300;
				font-size: 0.8125rem;
				color: hsl(0, 0%, 0%);
				line-height: 1.5;
				margin-bottom: 2.8em;
			}

			.read-more::before {
				border-left-color: hsl(0, 0%, 0%);
				margin-right: 0.5em;
			}

			.read-more,
			.read-all {
				font-weight: 700;
				font-size: 0.8125rem;
			}

			.read-all {
				justify-self: center;
				width: 100%;
				max-width: 80%;
				text-align: center;
				line-height: 2.5;
				color: hsl(0, 0%, 0%);
				border: 2px solid hsl(0, 0%, 0%);
				border-radius: 5em;
				margin-top: 2.5rem;

				&:hover,
				&:focus {
					text-decoration: none;
					color: hsl(0, 0%, 100%);
					background-color: hsl(0, 0%, 0%);
				}
			}
		}

		@media (min-width: 53.125rem) { /* 850px */
			.articles-content {
				gap: 4.375rem 5rem;
				padding-block: 6.875rem 5.625rem;
			}
		}

		@media (min-width: 65.625rem) { /* 1050px */
			.articles-content {
				gap: 5.625rem;
				padding-block: 10rem 8.25rem;
			}
		}
	}

	.membership {
		display: grid;
		justify-content: center;
		width: 100%;
		padding-block: 2.5rem 2.8125rem;
		background-color: hsl(0, 0%, 100%);
		overflow: hidden;

		.membership-content {
			position: relative;

			.floating {
				position: absolute;
				max-width: 13.875rem;
				right: -7.5rem;
				bottom: -9.375rem;
			}
		}

		.membership-block {
			display: grid;
			gap: 2.5rem;
			max-width: 21rem;

			.text-content {
				display: grid;
				grid-template-columns: 35% 1fr;
				grid-template-areas:
					'image heading'
					'innerText innerText';
				gap: 1.5rem;

				figure {
					grid-area: image;
					display: grid;
					justify-content: end;
					align-items: center;

					img {
						width: 10.25rem;
						max-width: none;
					}
				}

				h2 {
					font-size: 1.875rem;
					grid-area: heading;
				}

				.text {
					grid-area: innerText;
					padding-inline: 2rem;

					* {
						font-weight: 300;
						font-size: 0.875rem;
					}

					p {
						margin-bottom: 1.5em;
					}

					ul {
						list-style-type: none;
		
						li {
							display: flex;
							line-height: 1.5;
							margin-bottom: 0.25em;
		
							&::before {
								content: '\25CF';
								color: var(--clr-blue);
								font-size: 1.7em;
								line-height: 1;
								position: relative;
								top: -2px;
								margin-right: 0.25em;
							}
						}
					}
				}
			}

			.links {
				display: grid;
				justify-content: left;
				gap: 1.25rem;
				padding-inline: 2rem;

				.button {
					font-size: 0.875rem;
					line-height: 2.1;
					padding-inline: 1em;
					min-width: 9.875rem;
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
			}
		}

		@media (width >= 50rem) { /* 800px */
			& {
				padding-block: 3.125rem 3.75rem;
			}

			.membership-content {
				.floating {
					right: -5rem;
					bottom: -10.625rem;
				}
			}

			.membership-block {
				grid-template-columns: 1fr auto;
				align-items: center;
				max-width: 75rem;
				gap: 6.25rem;

				.text-content {
					grid-template-columns: 9.375rem 1fr;
					grid-template-areas:
						'image heading'
						'image innerText';
					gap: 1.25rem 5.625rem;
	
					figure {
						img {
							width: 15.25rem;
						}
					}
	
					h2 {
						font-size: 2.25rem;
						margin-block: 0;
					}
	
					.text {
						padding-inline: 0;

						* {
							font-size: 0.9375rem;
						}
					}
				}
	
				.links {
					padding-inline: 0 3rem;

					.button {
						font-size: 1.125rem;
						min-width: 12.375rem;
					}
				}
			}
		}

		@media (width >= 68.75rem) { /* 1100px */
			& {
				padding-block: 7.5rem;
				overflow: visible;
				overflow-x: clip;
			}

			.membership-content {
				.floating {
					max-width: 26.125rem;
					right: -23.125rem;
					bottom: -13.125rem;
				}
			}

			.membership-block {
				gap: 11.25rem;

				.text-content {
					column-gap: 5rem;
				}
	
				.links {
					padding-inline: 0 10rem;
				}
			}
		}
	}

}

.footer-wrapper {
    display: grid;
	gap: 2rem ;
    padding-block: 3.75rem;
	padding-inline: 1rem;
	max-width: 80.625rem;
	color: hsl(0, 0%, 100%);

	.footer-block {
		position: relative;

		h2 {
			font-weight: 500;
			font-size: 1.3125rem;
			margin-block: 0 0.5em;
		}
	}

	/***** Block 1 *********/
	.footer-block.one {
		ul {
			list-style-type: none;
			font-weight: 300;
			font-size: 0.875rem;
			line-height: 1.4;
		}
	}
	/***** end Block 1 *****/

	/***** Block 2 *********/
	.footer-block.two {
		ul {
			list-style: none;
			line-height: 1;
			margin-bottom: 0;
		}

		a {
			font-weight: 400;
			font-size: 0.875rem;
			color: var(--clr-blue-light);
			line-height: 1.4;
		}
	}
	/***** end Block 2 *****/

	/***** Block 3 *********/
	.footer-block.three {
		.copyright {
			p {
				font-weight: 300;
				font-size: 0.875rem;
				line-height: 1.4;
				margin-bottom: 0;
			}
		}
	}
	/***** end Block 3 *****/
}

@media (width < 53.125rem) { /* 850px */
	.footer-wrapper {
		.footer-block.two,
		.footer-block.three {
			padding-top: 2.875rem;
			&::before {
				content: '';
				width: 100%;
				height: 1px;
				background-color: hsl(0, 0%, 100%);
				position: absolute;
				top: 0;
			}
		}
	}
}

@media (min-width: 53.125rem) { /* 850px */
	.footer-wrapper {
		width: 100%;
		padding-block: 4.625rem 3.75rem;
		padding-inline: 2rem;
		grid-template-columns: auto auto 18.625rem;
		justify-content: space-between;

		.footer-block.one {
			ul {
				font-size: 1rem;
			}
		}

		.footer-block.two {
			a {
				font-size: 1rem;
			}
		}

		.footer-block.three {
			.copyright {
				p {
					font-size: 1rem;
				}
			}
		}

		.footer-block.two,
		.footer-block.three {
			padding-left: 3rem;
			&::before {
				content: '';
				width: 1px;
				height: 100%;
				background-color: hsl(0, 0%, 100%);
				position: absolute;
				left: 0;
			}
		}
	}
}
/***** end Footer**********/