software-development.scss

#software-page {
	.software-articles {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 20px;
		padding: 40px;

		.thumb-placeholder {
			height: 300px;
			width: 300px;
		}

		.software-thumb {
			width: 350px;
			display: grid;
			grid-template-columns: auto 1fr;
			gap: 20px;
			padding: 20px;
			border: 1px solid #ddd;

			.software-title {
				grid-column: 2;
				font-size: 20px;
				color: $medium_grey;
			}

			.software-subtitle {
				grid-column: 2;
				font-size: 17px;
			}

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

				img {
					max-width: 100%;
					max-height: 400px;
				}
			}

			transition: transform 0.3s;

			&:hover {
				transform: scale(1.03);
			}
		}

		@media screen and (max-width: 1100px) {
			.software-thumb {
				width: 500px;

				.software-image {
					width: 180px;
					height: 180px;
				}
			}
		}


		@media screen and (max-width: 900px) {
			.software-thumb {
				width: 100%;
			}
		}
	}
}