@charset "UTF-8";

.main-activity__grid{
	width: 100%;
	display: grid;
	align-items: start;
	grid-template-columns: repeat(4,1fr);
	grid-auto-rows: 1fr;
	gap:40px;
}

.main-activity__item{
}


.main-activity__item,.main-activity__item a{
	width: 100%;
	height: 100%;
}

.main-activity__img{
	position: relative;
	width: 100%;
	height: 0;
	margin-bottom: 20px;
	padding-bottom: 100%;
	overflow: hidden;
	border-radius: 8px;
	background-color: var(--color-gray-00);
	box-shadow: 0 0 0 1px var(--color-gray-10);
	flex-shrink: 0;
}

.main-activity__img img{
	position: absolute;
	top:50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: 0.3s
}

.main-activity__img img:hover{
	transform: translate(-50%,-50%) scale(1.1);
	transition: 0.3s
}

.no_image{
	position: absolute;
	top:50%;
	left: 50%;
	transform: translate(-50%,-50%);
	color: var(--color-gray-50)
}

.main-activity__name{
	height: 6rem;
	word-break: break-word;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical
}

.main-activity__date{
	margin-top: 12px;
	color: var(--color-gray-50)
}

.main-activity__empty-data{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 300px;
	text-align: center;
}

@media all and (max-width:1024px) {
	.main-activity__grid{
		gap:20px;
	}
}

@media all and (max-width:768px) {
	.main-activity__grid{
		grid-template-columns: repeat(2,1fr);
	}
}

@media all and (max-width:500px) {
	.main-activity__grid{
		grid-template-columns: repeat(1,1fr);
	}
}