/* Info icons — horizontal row of icon + label facts (jet band).
   Values measured from the reference info-icons component. */

.info-icons__content {
	align-items: start;
	display: flex;
	flex-direction: column;
}
@media screen and (min-width: 1024px) {
	.info-icons__content {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 30px;
		justify-content: center;
		padding-inline: 10%;
	}
}

.info-icons__icon {
	align-items: center;
	border-top: 1px solid #17191b4d;
	display: flex;
	gap: 20px;
	padding: 10px;
	text-align: center;
	width: 100%;
}
@media screen and (min-width: 1024px) {
	.info-icons__icon {
		flex: 0 0 calc(33.333% - 20px);
		justify-content: center;
		max-width: calc(33.333% - 20px);
	}
}

.info-icons__icon-wrap {
	align-items: center;
	display: inline-grid;
	flex: none;
	height: 48px;
	justify-content: center;
	width: 48px;
}
.info-icons__icon-wrap svg {
	height: auto;
	max-height: 36px;
	max-width: 36px;
	width: 36px;
}

.info-icons__title {
	font-weight: var(--font-weight-medium);
	margin-bottom: 0;
}

/* --------------------------------------------------- Diamond variant */

.info-icons__content--diamond { position: relative; }
.info-icons__content--diamond .info-icons__icon-wrap {
	background-color: var(--color-soft-black);
	border-color: transparent;
	border-radius: 0;
	height: 36px;
	transform: rotate(45deg);
	width: 36px;
}
.info-icons__content--diamond .info-icons__icon-wrap svg {
	color: var(--color-soft-white);
	max-height: 18px;
	max-width: 18px;
	width: 18px;
	transform: rotate(-45deg);
}
@media screen and (min-width: 1024px) {
	.info-icons__content--diamond .info-icons__icon-wrap { height: 44px; width: 44px; }
	.info-icons__content--diamond .info-icons__icon-wrap svg {
		max-height: 24px;
		max-width: 24px;
		width: 24px;
	}
}

/* Measured: reference credibility labels render at weight 500 */
.info-icons__title { font-weight: var(--font-weight-medium); }