*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	min-height: 100vh;
}

.podcast {
	display: flex;
	flex-wrap: wrap;
	margin: -1rem -1rem;
}

.podcast-item {
	flex: 1 0 18rem;
	margin: 1rem;
	overflow: hidden;
}

.podcast-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms ease-out;
}

.podcast-image:hover {
	transform: scale(1.1);
}


@supports (display: grid) {
	.podcast {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
		grid-gap: 1rem;
		border-radius: 10px;
	}

	.podcast,
	.podcast-item {
		margin: 0;
		border-radius: 10px;
	}
}

@media screen and (max-width:1099px) {
  .podcast {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
		grid-gap: 1rem;
	}

}

@media screen and (max-width:1039px) {
  .podcast {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
		grid-gap: 1rem;
	}

}

@media screen and (max-width:879px) {
  .podcast {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
		grid-gap: 1rem;
	}

}

@media screen and (max-width:751px) {
  .podcast {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
		grid-gap: 1rem;
	}

}

@media screen and (max-width:703px) {
  .podcast {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
		grid-gap: 1rem;
	}

}

@media screen and (max-width:639px) {
  .podcast {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
		grid-gap: .8rem;
	}

}

@media screen and (max-width:515px) {
  .podcast {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
		grid-gap: .8rem;
	}

}

@media screen and (max-width:463px) {
  .podcast {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
		grid-gap: .8rem;
	}

} 

@media screen and (max-width:425px) {
  .podcast {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
		grid-gap: .6rem;
	}

}   

@media screen and (max-width:395px) {
  .podcast {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
		grid-gap: .6rem;
	}

} 

@media screen and (max-width:351px) {
  .podcast {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
		grid-gap: .6rem;
	}
}