JSFiddle - React, Tailwind, and code Playground

by Stas Orekhovskiy

CSS

@media all and (max-width: 1350px) {
	.th img{height: 180px;}
	.th-small img{height: 143px;}
}
@media all and (max-width: 1250px) {
	.th img{height: 175px;}
}
@media all and (max-width: 1200px) {
	.th img{height: 171px;}
}
@media all and (max-width: 1150px) {
	.th img{height: 164px;}
	.th-small img{height: 133px;}
}
@media all and (max-width: 1100px) {
	.th img{height: 157px;}
	.th-small img{height: 127px;}
}
@media all and (max-width: 1050px) {
	.th img{height: 149px;}
	.th-small img{height: 121px;}
}
@media all and (max-width: 1024px) {
	.th img{height: 180px;}
	.th-small img{height: 143px;}
}
@media all and (max-width: 950px) {
	.th img{height: 169px;}
	.th-small img{height: 131px;}
}
@media all and (max-width: 900px) {
	.th img{height: 160px;}
	.th-small img{height: 124px;}
}
@media all and (max-width: 850px) {
	.th img{height: 150px;}
	.th-small img{height: 116px;}
}
@media all and (max-width: 800px) {
	.th img{height: 180px;}
	.th-small img{height: 143px;}
}
@media all and (max-width: 750px) {
	.th-small img{height: 133px;}
}
@media all and (max-width: 700px) {
	.th img{height: 169px;}
	.th-small img{height: 143px;}
}
@media all and (max-width: 650px) {
	.th img{height: 156px;}
}
@media all and (max-width: 600px) {
	.th img{height: 144px;}
}
@media all and (max-width: 550px) {
	.th img{height: 180px;}
	.th-small img{height: 129px;}
}
@media all and (max-width: 540px) {
	.th-small img{height: 120px;}
	.th-small img{height: 127px;}
}
@media all and (max-width: 450px) {
	.th img{height: 162px;}
	.th-small img{height: 143px;}
}
@media all and (max-width: 440px) {
	.th img{height: 160px;}
	.th-small img{height: 130px;}
}
@media all and (max-width: 400px) {
	.th img{height: 143px;}
	.th-small img{height: 140px;}
}
@media all and (max-width: 360px) {
	.th img{height: 180px;}
	.th-small img{height: 125px;}
}