@media screen and (min-width: 320px) {
	.header{
		display: flex;
		justify-content: center;
		margin-bottom: 1rem;
		background: #f8f8f8;
		position: sticky;
		top: 4rem;
		padding: .7rem 0;
		z-index: 1;
	}
	.tab:hover{
		cursor: pointer;
	}
	.tab{
	  padding:5px 20px;
	}
	.tab.active{
	  color: black;
	}
	.cont .box{
		width: 48%;
		margin-bottom: 1.5rem;
		background: #fcfcfc;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	}
	.cont .panel .box section{
		aspect-ratio: 16/9;
	}
	.cont .short .box{
		width: 30%;
	}
	.cont .panel.short .box section{
		aspect-ratio: 9/16;
	}
	.cont .box img{
		width: 100%;
	}
	.panel{
	  display:none;
	}
	.panel .box p{
		padding: 0 1rem;
	}
	.panel.active{
	  display: flex;
	  flex-wrap: wrap;
	  justify-content: space-between;
	}
	.panel.active:after{
		content: '';
		height: 0;
		width:30%;
	}
	.panel.active
}
@media screen and (min-width: 800px) {
	.header{
		top: 6rem;
		background: white;
		padding-bottom: 2rem;
		margin-bottom: 0;
	}
	.col {
		margin: 0;
	}
	main .cont{
		width: 80rem;
		margin: 0 auto;
	}
	.cont .box{
		width: 31%;
		margin-bottom: 3rem;
	}
	.cont .box:hover{
		cursor: pointer;
	}
	.cont .box section{
		overflow: hidden;
	}
	.cont .box img {
		transition: transform 200ms ease-in;
	}
	.cont .box img:hover{
		transform: scale(1.2);
	}
	.cont .short .box{
		width: 21%;
	}
	.panel.active:after{
		width: 31%;
	}
	.panel.active.short:after{
		width: 22%;
	}
}