.about {
	padding: 2rem 0;
	background-color: var(--l);

	.box {
		h2 {
			font-size: 200%;
			padding-bottom: 2rem;
			color: var(--d);
      text-align: center;
		}

		.text {
			background-color: var(--b);
			color: var(-l);
			padding: 1rem;
			border-radius: 10px;
			margin-bottom: 1rem;
      margin-left: auto;
      margin-right: auto;

			p {
				color: var(--l);
				line-height: 3rem;
				padding-bottom: 1rem;
        font-size: 120%;
			}
		}

		a {
			height: 2.5rem;
			display: block;
			width: fit-content;
			padding: 0.5rem 1rem;
			background-image: var(--y);
			color: var(--d);
			font-weight: 700;
			transition: all 0.1s ease-out;
			margin-left: auto;
			margin-right: auto;

			&:hover {
				border-bottom: 5px solid var(--b);
				translate: 0 -5px;
			}
		}
	}
}

@media (min-width: 768px) {
	.about {
		padding: 4rem 0;

		h2 {
			font-size: 300%;
		}

		.text {
			width: 70%;
		}

		a {
			margin: 0;
		}
	}
}