@import "core.css?d=1";
@import "header.css?d=6";
/* main */
main{
	padding:20px 10px;
	display:flex;flex-direction:column;
	align-items:center;
}
main>.headline{
	text-align:center;margin-bottom:10px;
}
main>.intro{
	color:#888888;font-size:0.8em;margin-bottom:25px;
}
main>.result{
	width:95%;max-width:800px;
}
main>.result>.reminder{
	text-align:center;padding-bottom:100px;line-height:1.5em;
}
main>.result>.channel{
	display:grid;
	grid-template-columns:150px auto;
	grid-template-rows:50px 100px;
	grid-template-areas:
		"logo title"
		"logo description";
	grid-column-gap:15px;
	margin-bottom:20px;
}
main>.result>.channel>.logo{
	grid-area:logo;width:150px;height:150px;cursor:pointer;
}
main>.result>.channel>.title{
	grid-area:title;align-self:center;
}
main>.result>.channel>.description{
	grid-area:description;
	color:#888888;font-size:0.8em;line-height:1.5em;
	overflow:hidden;text-overflow:ellipsis;
}
@media (max-width:500px){
	main>.result>.channel{
		grid-template-columns:50px auto;
		grid-template-areas:
			"logo title"
			"description description";
		grid-row-gap:10px;
	}
	main>.result>.channel>.logo{
		width:50px;height:50px;
	}
}