@use "./abstracts/colors" as *;
@use "./abstracts/fonts" as *;

.index-made-by-us {
	.list-card {
		display: flex;
		// flex-direction: column;
		flex-wrap: wrap;
		width: 100%;
	}
}

section.services-list {
	width: 90vw;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;

	div.service-type {
		width: 25rem;

		margin: 1.5rem 1.5rem;
		display: flex;
		flex-direction: column;
		align-items: center;

		.service-type-header {
			display: flex;
			flex-direction: column;
			align-items: center;
			height: 300px;

			.service-name {
				text-align: center;
				font-size: 2rem;
				width: 90%;
			}

			.service-type-image {
				max-height: 50%;
				margin-left: auto;
				margin-right: auto;
			}
		}
		.service-description {
			line-height: 1.7rem;
			margin: 0 0 5px 0;
			width: 95%;
		}

		a.service-link {
			margin-top: 1rem;

			& > span {
				margin: 0;
				color: $primary;
				font-weight: bold;
				border: 1px solid $primary;
				border-radius: 0.3rem;
				padding: 0.8rem 1.2rem;
				transition: all 100ms ease-in-out;

				&:hover,
				&:focus {
					box-shadow: 0 0 1px 1px $primary;
				}
			}
		}
	}
}

@media screen and (max-width: 447px) {
	section.services-list > div.service-type {
		width: 19rem;
		margin: 1.5rem 0;
	}
}
