sarachisholm

<img src=”{{ slide_img | asset_url }}” alt=”{{ settings[slide_heading] }}”>

sarachisholm

<img src="{{ product.featured_image.src }}" alt="{{ product.featured_image.alt }}">

sarachisholm

.block {
	display: inline-block;
	min-width: 50%; /* 300px */ 
	max-width: 100%; /* 600px */ 
	width: calc((480px - 100%) * 480); /* or [calc((480px - 600px) * 480);], which equals -57,600px */
}

sarachisholm

.product {
  max-width: 400px;
  box-shadow: 0 0 15px 5px #eee;
  padding: 30px;
}

.product__buy {
  background: #7ab55c;
  padding: 0.5625em 1.875em;
  color: white;

sarachisholm

Body {
	counter-reset: amount;
}
#itemA-3:checked ~
#itemE-5:not:checked {
	counter-increment: amount;
}
.price {
	content: ‘$’ + counter(amount);
}

sarachisholm

/*CSS*/
}
#itemA-3:checked ~ 
#itemB-6:checked ~ 
#itemC-2:checked ~ 
#itemD-11:checked ~ 
#itemE-5:not:checked ~ 
#itemF-2:checked ~ 
#itemG-5:checked ~ * .div1 {
display: block;

sarachisholm

<!--HTML-->
<input type="radio" id="itemA-1" />
<input type="radio" id="itemA-2" />
<input type="radio" id="itemA-3" /> 
<label for="itemA-1" />Carousel</label> 
<label for=“itemD-11" />div</label>

sarachisholm

.block {
	display: inline-block;
	min-width: 50%; /* 150px */ 
	max-width: 100%; /* 300px */ 
	width: calc((480px - 100%) * 480); /* or [calc((480px - 300px) * 480);], which equals 86,400px */
}

sarachisholm

.box {
	display: inline-block;
	min-width: 50%; 
	max-width: 100%;
	width: calc((480px - 100%) * 480);
}

sarachisholm

.box {
  width: XXpx;
  min-width: XXpx;
  max-width: XXpx;
}