.mat__list {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 20px;
	margin-top: 30px;
}


.mat__item {
	border: 1px solid #F2F2F2;
}

.mat__item img {
	max-height: 300px;
	object-fit: cover;
}

.mat__elems__list {
	overflow-x: hidden;
}

.mat__item__actions {
	padding: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
    gap: 10px;
}

@media(max-width:612px) {
.mat__item__actions {
	flex-direction: column;
	}
}

.mat__item__actions a {
	color: white;
	padding: 10px 15px;
}

.mat__item__actions a:hover {
	text-decoration: none;
	color: white;
}

@media (max-width: 1400px) {
	.mat__list {

		grid-template-columns: repeat(4, 1fr);
	}
}

@media (max-width: 1150px) {
	.mat__list {

		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 850px) {
	.mat__list {

		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 500px) {
	.mat__list {
		display: flex;
		overflow-x: scroll;

	}

	.mat__item {
		min-width: 80vw;
	}
}