Stampa:Arritje/styles.css

/* Adjust padding and grid */
.mp-card-milestones {
	padding-right: 0.5rem;
	display:grid;
	grid-template-columns: 3fr 1fr;
	gap: 1rem;
}
/* Desktop specific styles */
@media (min-width: 875px) {
	
	/* Adjust milestones width */
	.mp-card-milestones > div:first-child {
		min-width: 20rem;
	}
	
	/* Adjust image position and animation */
	.mp-card-milestones img {
		float: right;
		width: 200px;
		height: auto;
		margin: -10px 0 0 10px;
		transition: opacity 0.2s ease-in-out;
		opacity: 0.3;
	}

	.mp-card-milestones img:hover {
		opacity: 1;
	}
	
	/*Adjust label's position */
	.mp-card-stats {
		font-size: 110%;
		text-align: right;
		margin-right: 80px;
	}
	
}

/* Mobile specific styles */
@media (max-width: 875px) {
	
	/* Switch to a 1-column grid */
	.mp-card-milestones {
		grid-template-columns: 1fr;
	}
	
	/* Adjust image's position and disable animation */
	.mp-card-milestones img {
		width: 150px;
		height: auto;
		padding: 10px;
		border: 2px dashed #000;
		display: block;
		margin: auto;
		transition: none;
		opacity: 1;
	}
	
	/* Adjust label's position */
	.mp-card-stats {
		font-size: 100%;
		text-align: center;
		margin: -10px 0 0 0;
	}
}