.learning-row{
	width: 100%;
	max-width: 1320px;
	padding-inline: var(--default-padding);
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	@media (min-width: 800px) {
		grid-template-columns: repeat(4, 1fr);
	}
	
	.learning-element{
		display: flex;
		flex-direction: column;
		.detail{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-inline: var(--default-small-padding);
			gap: 10px;
			height: 60px;
			border-bottom-right-radius: var(--border-radius-large);
			@media (min-width: 800px) {
				height: 70px;
			}
			background: var(--dark-color);
			span{
				cursor: pointer;
				text-transform: uppercase;
				color: var(--yellow-color);
				font-size: var(--subtitle-font-size);
				font-weight: 500;
			}
			
			i{
				cursor: pointer;
				font-size: var(--button-font-size);
				background: var(--white-color);
				border-radius: var(--border-radius-small);
				padding: 10px;
				color: var(--dark-color);
			}
		}
		
		img{
			width: 100%;
			object-fit: cover;
			border-top-left-radius: var(--border-radius-large);
			aborder-top-right-radius: var(--border-radius-medium);
		}	
	}
}