ECサイト用パーツ

CSS

.item__list__thumbnail__type4 .flexBox {
  margin: 0 -25px;
}

.item__list__thumbnail__type4 article {
  margin: 0 25px 50px;
  width: -webkit-calc(100% / 3 - 50px);
  width: calc(100% / 3 - 50px);
}
.item__list__thumbnail__type4 article:nth-last-child(1),
.item__list__thumbnail__type4 article:nth-last-child(2),
.item__list__thumbnail__type4 article:nth-last-child(3) {
  margin-bottom: 0;
}

.item__list__thumbnail__type4 article a {
  display: block;
}
.item__list__thumbnail__type4 article figure {
  margin-bottom: 10px;
  padding-top: 100%;
  position: relative;
  width: 100%;
}
.item__list__thumbnail__type4 article figure img {
  object-fit: cover;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}
.item__list__thumbnail__type4 article p {
  font-size: 14px;
  line-height: 1.8;
}
@media screen and (max-width: 800px) {
	.item__list__thumbnail__type4 .flexBox {
		margin: 0 -2vw;
	}
	.item__list__thumbnail__type4 article {
		margin: 0 2vw 6vw;
		width: -webkit-calc(100% / 3 - 4vw);
		width: calc(100% / 3 - 4vw);
	}
	.item__list__thumbnail__type4 article figure {
		margin-bottom: 1vw;
	}
	.item__list__thumbnail__type4 article p {
		font-size: 1.8vw;
	}
}
@media screen and (max-width: 540px) {
	.item__list__thumbnail__type4 .flexBox {
		margin: 0;
	}
	.item__list__thumbnail__type4 article {
		margin: 0 0 8vw;
		width: 100%;
	}
	.item__list__thumbnail__type4 article:nth-last-child(1),
	.item__list__thumbnail__type4 article:nth-last-child(2),
	.item__list__thumbnail__type4 article:nth-last-child(3) {
	  margin-bottom: 8vw;
	}
	.item__list__thumbnail__type4 article figure {
		margin-bottom: 2vw;
	}
	.item__list__thumbnail__type4 article p {
		font-size: 3.4vw;
	}
}