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

.item-card {
	max-width: 80vw;
	margin-top: 1.3rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	.item-card-image {
		height: auto;
		width: 80%;
		border-radius: 0.5rem;
	}

	.item-text {
		padding: 5px;
		display: flex;
		flex-direction: column;
		align-items: center;

		.item-card-name {
			font-size: 1.1rem;
			font-weight: bold;
			margin-top: 0;
			margin-bottom: 10px;
		}
		.item-card-description {
			font-size: 0.8rem;
			font-weight: normal;
			margin-top: 0;
			margin-bottom: 10px;
		}
	}

	@media screen and (min-width: 900px) {
		.tech-tag-list {
			display: flex;
			flex-direction: row;
			justify-content: center;

			.tech-tag {
				display: block;
				margin: 0 7px;
				padding: 2px 10px;
				background: $light;
				color: $primary;
				font-size: 0.8rem;
				border-radius: 6rem;
			}
		}
	}

	@media screen and (max-width: 900px) {
		.tech-tag-list {
			height: auto;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;

			.tech-tag {
				display: block;
				margin: 5px 7px;
				padding: 2px 10px;
				background: $light;
				color: $primary;
				font-size: 0.8rem;
				border-radius: 6rem;
			}
		}
	}
}

img.item-card:first-of-type {
	margin-top: 0px;
}
