#selling-points {
	padding-top: 0;
	margin-bottom: var(--spacing-huge);
	padding-bottom: var(--spacing-large);
}

#selling-points ul {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-column-gap: var(--spacing-large);

	max-width: var(--max-width);
	margin-left: auto;
	margin-right: auto;
}
#selling-points li {
	position: relative;
	display: block;
	background: var(--color-dark-grey);
	color: var(--color-background);

	padding: var(--spacing-large);
	padding-bottom: var(--spacing-huge);
}

#selling-points strong {
	display: block;
	font-size: var(--font-size-small);
	font-weight: 600;
	margin-bottom: var(--spacing-medium);
}

#selling-points img {
	position: absolute;
	z-index: 9001;
	left: 50%;
	bottom: 0;
	display: block;
	width: 5rem;
	height: 5rem;
	transform: translate(-50%, 50%);
	background: var(--color-accent);
	padding: var(--spacing-medium);
}

#dimensions-guide,
#dim10x10,
#dim10x15,
#dim10x20 {
	background: var(--color-dark-grey);
	color: var(--color-background);
}

#dimensions-guide *,
#dim10x10 h3,
#dim10x15 h3,
#dim10x20 h3 {
	color: #fff;
}

#dimensions-guide h2 { margin-bottom: var(--spacing-medium); }
#dimensions-guide ul {
	display: flex;
	flex-direction: row;
}

#dimensions-guide li {
	display: block;
	margin: 0 var(--spacing-large);
}
#dimensions-guide li:first-child { margin-left: 0; }

#dimensions-guide a {
	font-size: 1.25rem;
	font-weight: 600;
	border-bottom: 2px solid transparent;
	padding: var(--spacing-small) var(--spacing-tiny);
}

#dimensions-guide a:hover,
#dimensions-guide a:focus,
#dimensions-guide a:active {
	color: var(--color-accent);
}

@keyframes fadeIn {
	from {
		opacity:0;
	}
	to { opacity: 1; }
}

#dimensions-guide .ribbon .active {
	border-bottom-color: var(--color-accent);
	color: var(--color-accent);
}
*[data-tab="1"] { padding-top: 0; }
*[data-tab="1"]:not(.active) { display: none; }
*[data-tab="1"].active > * {
	animation: fadeIn 450ms ease-in;
}


#pricing ul {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-column-gap: var(--spacing-large);

	max-width: var(--max-width);
	margin-left: auto;
	margin-right: auto;
}
#pricing li {
	display: block;
	padding: var(--spacing-large) var(--spacing-medium);

	background: var(--color-white);
	color: var(--color-foreground);
	text-align: center;

	font-size: var(--font-size-medium);
}

#pricing li:only-child {
	grid-column-start: 2;
	grid-column-end: 3;
}

#pricing a {
	margin-top: var(--spacing-medium);

	--button-background: var(--color-accent);
	--button-foreground: var(--color-white);
	--button-border: var(--color-accent);

	display: block;
	text-align: center;

	color: var(--button-foreground);
	background: var(--button-background);
	padding: var(--spacing-small) var(--spacing-medium);
	font-size: 1rem;
	font-weight: 600;
	text-transform: uppercase;
	text-shadow: none;

	border: 1px solid var(--button-border);
	line-height: 2;

	transition: all 320ms ease-in;
}

#pricing a:focus,
#pricing a:hover,
#pricing a:active {
	--button-background: transparent !important;
	--button-foreground: var(--color-accent) !important;
	--button-border: var(--color-accent) !important;
}

#pricing strong {
	font-size: var(--font-size-huge);
	font-weight: 600;
	color: var(--color-accent);
	margin-right: var(--spacing-tiny);
}

#pricing ul + p {
	text-align: center;
}

@media only screen and (min-width: 1201px) {
	#dim10x10 img,
	#dim10x15 img,
	#dim10x20 img {
		min-height: calc(9/16 * 50vw);
	}
}

@media only screen and (min-width: 1800px) {
	#dim10x10 .content,
	#dim10x15 .content,
	#dim10x20 .content {
		max-width: 40rem;
	}
	#selling-points ul { --max-width: 2200px; }
	#pricing ul { --max-width: 2200px; }
}

@media only screen and (max-width: 768px) {
	#storage-for-your-needs { margin-bottom: 0; }
	#selling-points { margin-top: 0; }

	#dimensions-guide {
		margin-bottom: 0;
		padding-top: var(--spacing-large);
	}
	#dimensions-guide ~ * { margin-top: 0; }

	#pricing ul {
		grid-template-columns: 1fr;
		grid-template-rows: 1fr 1fr 1fr;
	}

	#pricing { padding-left: 0; padding-right: 0;}

	#pricing li { text-align: left; margin-bottom: var(--spacing-small); }
	#pricing li:last-child { margin-bottom: 0; }
	#pricing li a { float: right; }
}

@media only screen and (max-width: 640px) {
	#selling-points { padding-left: 0; padding-right: 0; }
	#selling-points ul {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto;
	}

	#selling-points li {
		padding-top: var(--spacing-large);
		padding-bottom: var(--spacing-large);
		margin-bottom: var(--spacing-small);
	}
	#selling-points li p { max-width: 80%; margin:0; margin-right: 4.25rem;}

	#selling-points img {
		top: 50%;
		left: auto;
		right: var(--spacing-medium);
		transform: translateY(-50%);
	}
}

@media only screen and (max-width: 425px) {
	#pricing li { text-align: center; }
	#pricing li a { float: none; }
	#dimensions-guide li {
		margin: 0 var(--spacing-medium);
	}
}