.artist-feed {
	// padding: var(--section-padding);
  	padding-bottom: 20px;
	height: 100%;
	min-height: 100vh;
}

.title {
	padding-left: 8px;
}

.artist-grid {
  	--gap: 10px;
  	--num-cols: 5;
  	--item-size: 200px;

  	box-sizing: border-box;
  	padding: var(--gap);

  	display: grid;
  	grid-template-columns: repeat(var(--num-cols), 1fr);
  	gap: var(--gap);
}

.page-container {
	margin: 12px;
}

.artist-card {
	-webkit-transition: .5s ease;
	-moz-transition: .5s ease;
	-o-transition: .5s ease;
	-ms-transition: .5s ease;
	transition: .5s ease;

	aspect-ratio: 1 / 1;
  	position: relative;
	overflow: hidden;

	cursor: pointer;

  	height: 100%;
  	width: 100%;
}

.artist-image{
	z-index: 0;
	aspect-ratio: 1 / 1;
  	width: 100%;
  	height: 100%;
  	position: absolute;
	object-fit: cover;
}

.artist-info-container {
	z-index: 3;
  	position: absolute;
  	bottom: 0px;
  	left: 0px;
  	background-color: rgba(var(--color-background), .8);
	border-bottom: 1px rgba(var(--color-button)) solid;
	border-left: 8px rgba(var(--color-button)) solid;

	font-size: 14px;
  
  	border-top-right-radius: 4px;
	line-height: 16px;
  	padding-inline: 16px;

  	min-width: 10%;
  	height: 30px;

  	overflow: hidden;
}

.artist-name {
  	margin-block: 8px;
	font-size: 14px;
}

.artist-text {
  	color: rgb(var(--color-button));
  	font-size: 18px;
  	text-align: left;

  	-webkit-transition: .5s ease;
  	-moz-transition: .5s ease;
  	-o-transition: .5s ease;
  	-ms-transition: .5s ease;
  	transition: .5s ease;

  	visibility: hidden;
}

.overlay {
	z-index: 5;
  	position: absolute;
  	top: 0;
  	bottom: 0;
  	left: 0;
  	right: 0;
  	overflow: hidden;
  	opacity: 1;

  	background-color: rgba(#F5001F, .8);
}

.artist-card:hover{
	-webkit-transition: .1s ease;
	-moz-transition: .1s ease;
	-o-transition: .1s ease;
	-ms-transition: .1s ease;
	transition: .1s ease;

	border: #F5001F solid 2px;

	box-shadow: 2px 2px .4em #F5001F, -2px -2px .4em #F5001F;

	border-radius: 8px;

  	.glitch__layers {
		-webkit-transition: .5s ease;
		-moz-transition: .5s ease;
		-o-transition: .5s ease;
		-ms-transition: .5s ease;
		transition: .5s ease;

    	opacity: 1;
  	}
}

.metafield-single_line_text_field-array {
	list-style-type: none;
	margin-block-start: 0;
	padding-inline-start: 0;
}

// Glitch

.artist-image-container {
	width: 100%;
	height: 100%;
}

.glitch__layers {
	z-index: 1;
	opacity: 0;
	position: absolute;
	height: 100%;
	width: 100%;

	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}

.glitch__layer {
	height: 100%;
	width: 100%;
	position: sticky;
	object-fit: cover;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}

.glitch__layer:nth-child(1) {
	animation: glitch-anim-1 2s infinite linear alternate;
	transform: translate(0px, 20px);
}

.glitch__layer:nth-child(2) {
	animation: glitch-anim-2 2.3s -.8s infinite linear alternate;
}

.glitch__layer:nth-child(3) {
	animation: glitch-anim-flash 4s infinite linear;

	transform: translate(-5px, 4px);
}

@keyframes glitch-anim-1 {
	0% {
		clip-path: polygon(0 0%, 100% 0%, 100% 5%, 0 5%);
	}
	10% {
		clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
	}
	20% {
		clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
	}
	30% {
		clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
	}
	40% {
		clip-path: polygon(0 35%, 100% 35%, 100% 35%, 0 35%);
	}
	50% {
		clip-path: polygon(0 45%, 100% 45%, 100% 46%, 0 46%);
	}
	60% {
		clip-path: polygon(0 50%, 100% 50%, 100% 70%, 0 70%);
	}
	70% {
		clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
	}
	80% {
		clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
	}
	90% {
		clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
	}
	100% {
		clip-path: polygon(0 60%, 100% 60%, 100% 70%, 0 70%);
	}
}
@keyframes glitch-anim-2 {
	0% {
		clip-path: polygon(0 15%, 100% 15%, 100% 30%, 0 30%);
	}
	15% {
		clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
	}
	25% {
		clip-path: polygon(0 8%, 100% 8%, 100% 20%, 0 20%);
	}
	30% {
		clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
	}
	45% {
		clip-path: polygon(0 45%, 100% 45%, 100% 45%, 0 45%);
	}
	50% {
		clip-path: polygon(0 50%, 100% 50%, 100% 57%, 0 57%);
	}
	65% {
		clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
	}
	75% {
		clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
	}
	80% {
		clip-path: polygon(0 40%, 100% 40%, 100% 60%, 0 60%);
	}
	95% {
		clip-path: polygon(0 45%, 100% 45%, 100% 60%, 0 60%);
	}
	100% {
		clip-path: polygon(0 11%, 100% 11%, 100% 15%, 0 15%);
	}
}
@keyframes glitch-anim-flash {
	0% {
		opacity: .2;
	}
	30%, 100% {
		opacity: 0;
	}
}

@media screen and (max-width: 749px) {
  	.artist-grid {
		gap: 1rem;
		--num-cols: 1;
  	}
}