/* =========================================================
   TEDDY'S STUDIO AMENITIES
   Stripped-back responsive icon grid
   ========================================================= */

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

.tp-amenities {
	width: 100%;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	outline: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

.tp-amenities__grid {
	display: grid;
	grid-template-columns: repeat(var(--tp-amenities-cols-d, 5), minmax(0, 1fr));
	align-items: start;
	justify-items: stretch;
	column-gap: var(--tp-amenities-col-gap-d, 54px);
	row-gap: var(--tp-amenities-row-gap-d, 44px);
	width: 100%;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	outline: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

.tp-amenities__item {
	display: flex;
	min-width: 0;
	align-items: center;
	flex-direction: column;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	outline: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	text-align: center;
}

.tp-amenities__icon {
	display: grid;
	width: var(--tp-amenities-icon-d, 34px);
	height: var(--tp-amenities-icon-d, 34px);
	place-items: center;
	flex: 0 0 auto;
	margin: 0 0 var(--tp-amenities-icon-title-gap, 12px) !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

.tp-amenities__icon img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0 !important;
	object-fit: contain;
	object-position: center;
}

/*
 * Uploaded SVGs are used as alpha masks. This allows one Features-only
 * colour setting to recolour the complete icon family without modifying the
 * source files. Raster images deliberately keep their original colours.
 */
.tp-amenities__icon-svg {
	display: block;
	width: 100%;
	height: 100%;
	background-color: var(--tp-amenities-icon-color, #b6402f);
	-webkit-mask-image: var(--tp-amenity-icon-image);
	mask-image: var(--tp-amenity-icon-image);
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.tp-amenities__title {
	width: 100%;
	margin: 0 !important;
	padding: 0 !important;
	color: var(--tp-amenities-title-color, #b6402f) !important;
	font-family: var(--tp-amenities-title-font, Anton, Impact, sans-serif) !important;
	font-size: var(--tp-amenities-title-size-d, 15px) !important;
	font-style: normal !important;
	font-weight: var(--tp-amenities-title-weight, 400) !important;
	line-height: var(--tp-amenities-title-leading, 1.05) !important;
	letter-spacing: var(--tp-amenities-title-tracking, .02em) !important;
	text-align: center !important;
	text-transform: var(--tp-amenities-title-transform, uppercase) !important;
	text-wrap: balance;
}

.tp-amenities__caption {
	width: 100%;
	margin: var(--tp-amenities-title-caption-gap, 5px) 0 0 !important;
	padding: 0 !important;
	color: var(--tp-amenities-caption-color, #211815) !important;
	font-family: var(--tp-amenities-caption-font, "Source Sans 3", Arial, sans-serif) !important;
	font-size: var(--tp-amenities-caption-size-d, 15px) !important;
	font-style: normal !important;
	font-weight: var(--tp-amenities-caption-weight, 800) !important;
	line-height: var(--tp-amenities-caption-leading, 1.2) !important;
	letter-spacing: var(--tp-amenities-caption-tracking, 0em) !important;
	text-align: center !important;
	text-wrap: balance;
}

.tp-amenities__item > .tp-amenities__caption:first-child,
.tp-amenities__icon + .tp-amenities__caption {
	margin-top: 0 !important;
}

@media (max-width: 1024px) {
	.tp-amenities__grid {
		grid-template-columns: repeat(var(--tp-amenities-cols-t, 3), minmax(0, 1fr));
		column-gap: var(--tp-amenities-col-gap-t, 36px);
		row-gap: var(--tp-amenities-row-gap-t, 38px);
	}

	.tp-amenities__icon {
		width: var(--tp-amenities-icon-t, 32px);
		height: var(--tp-amenities-icon-t, 32px);
	}

	.tp-amenities__title {
		font-size: var(--tp-amenities-title-size-t, 14px) !important;
	}

	.tp-amenities__caption {
		font-size: var(--tp-amenities-caption-size-t, 14px) !important;
	}
}

@media (max-width: 640px) {
	.tp-amenities__grid {
		grid-template-columns: repeat(var(--tp-amenities-cols-m, 2), minmax(0, 1fr));
		column-gap: var(--tp-amenities-col-gap-m, 18px);
		row-gap: var(--tp-amenities-row-gap-m, 34px);
	}

	.tp-amenities__icon {
		width: var(--tp-amenities-icon-m, 30px);
		height: var(--tp-amenities-icon-m, 30px);
	}

	.tp-amenities__title {
		font-size: var(--tp-amenities-title-size-m, 13px) !important;
	}

	.tp-amenities__caption {
		font-size: var(--tp-amenities-caption-size-m, 14px) !important;
	}
}