.logo a{
  color: #ffff;
}
.header__list-link {
  color: #ffff;
}

main {
	background: url(../shared/images/projects-bg.png) no-repeat right bottom -30rem,
		linear-gradient(40deg, #424f45 6%, #1e2f23 97%);
	overflow-x: hidden;

	.process {
		padding-block-start: 11.375rem;
		padding-inline: 3.75rem;

		.header {
			h5 {
				display: flex;
				align-items: center;
				gap: 0.75rem;

				&::before {
					content: "";
					display: inline-block;
					height: 0.5px;
					width: 1.5rem;
					background-color: var(--white);
				}
			}

			h1 {
				font-size: clamp(2rem, 12.125vw, 6.25rem);
				font-weight: 700;
				color: #525f56;
			}
		}
	}

	.cards {
        display: flex;
        justify-content: center;
		position: relative;
		height: 80vh;
		overflow-y: visible;
		margin-inline: 3.75rem;

		.card {
			height: 80vh;
			border-radius: 2rem;
			overflow: hidden;
			--gap: 2.5rem;
			position: absolute;
			bottom: -200%;
			width: 90vw;

			&:nth-of-type(1) {
				z-index: 1;
			}

			&:nth-of-type(2) {
				z-index: 2;
			}

			&:nth-of-type(3) {
				z-index: 3;
			}

			&:nth-of-type(4) {
				z-index: 4;
			}

			&:nth-of-type(5) {
				z-index: 5;
			}

			&:nth-of-type(6) {
				z-index: 6;
			}

			&:nth-of-type(7) {
				z-index: 7;
			}

			img {
				position: absolute;
				width: 100%;
                height: 100%;
				object-fit: cover;
			}

			.text-content {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				height: 100%;
				position: relative;
				z-index: 2;
				padding-block: clamp(1.25rem, 2.125vw, 2.5rem);
				padding-inline: clamp(1rem, 2.125vh, 5rem);

				.counter {
					.count {
						font-size: clamp(1.75rem, 12.125vw, 4rem);
					}

					.limit {
						font-size: clamp(0.875rem, 12.125vw, 2.375rem);
					}
				}

				.description {
					h3 {
						font-size: clamp(1.5rem, 12.125vw, 2rem);
						margin-block-end: 1rem;
					}

					p {
						font-size: clamp(1rem, 12.125vw, 1.125rem);
						font-weight: 300;
					}
				}
			}
		}
	}
}

@media screen and (max-width: 1025px) {
    .cards,
    .card {
        height: 40.5rem!important;
    }
}

@media screen and (max-width: 769px) {
    .cards,
    .card {
        height: 32.5rem!important;
    }

    .process {
        padding-inline: 1.25rem!important;
    }

    .description > p {
        font-size: 1rem!important;
    }
}

@media screen and (max-width: 426px) {
    .cards,
    .card {
        height: 33.5rem!important;
    }
}