software-development.scss

#software-page {
	.software-articles {
		margin: 20px auto 50px;
		article.software-article {
			display: grid;
			grid-template-columns: auto 1fr;
			margin: 0 0 50px;
			gap: 10px 30px;

			.software-title {
				grid-column: 2;
				color: $light_2;
				margin: 0;
				padding: 10px;
			}

			.software-subtitle {
				grid-column: 2;
				margin: 10px;
				color: $medium_grey;
			}

			.software-description {
				grid-column: 2;
				text-align: justify;
				margin: 10px;
			}

			.software-image {
				padding: 20px;
				background-color: black;
				grid-column: 1;
				grid-row: 1 / span 3;
				@include flex-center;
				width: 200px;
				height: 200px;
				overflow: hidden;
				border-radius: 100%;
				img {
					max-width: 100%;
					max-height: 400px;
				}
			}

			@media screen and (max-width: $screen_l) {
				.software-title {
					display: flex;
					align-items: center;
				}
				.software-subtitle,
				.software-description {
					grid-column: 1 / span 2;
				}
				.software-image {
					width: 100px;
					height: 100px;
					grid-row: 1;
				}
			}
		}
		article.placeholder {
			display: flex;
			flex-direction: column;
			gap: 10px;
			margin: 30px;
			* {
				background-color: $light_0;
			}
			.title {
				height: 60px;
			}
			.body {
				height: 400px;
			}
			.details {
				height: 200px;
			}
		}
	}
}