/* == Card == */
.wojo.card {
		position: relative;
		display: flex;
		flex-direction: column;
		min-width: 0;
		margin: 1rem 0;
		word-wrap: break-word;
		background-color: var(--white-color);
		border-radius: 1rem;
		box-shadow: 0 .375rem 1.5rem 0 var(--shadow-color);
}
.wojo.card > .content,
.wojo.card > .header,
.wojo.card > .footer {
		padding: calc(var(--unit-mini) * 3);
}
.wojo.card > .header.divided {
		box-shadow: 0 1px 0 0 var(--grey-color-500);
}
.wojo.card > .footer.divided {
		box-shadow: inset 0 1px 0 0 var(--grey-color-500);
}
.wojo.card .link + .link {
		margin-left: var(--margin);
}
.wojo.card > .header.small-gutters,
.wojo.card > .footer.small-gutters,
.wojo.segment.small-gutters {
		padding-bottom: calc(var(--gutter) / 2);
}
.wojo.card > .header.compact,
.wojo.card > .footer.compact {
		padding-bottom: 0;
}
.wojo.segment {
		position: relative;
		padding: var(--unit);
		background-color: var(--white-color);
		border-radius: 1rem;
		border: 1px solid var(--grey-color-500);
}
/* == Style == */
.wojo.framed.segment,
.wojo.framed.card,
.wojo.framed.cards > .card {
		border: 1px solid var(--grey-color-500);
}
.wojo.compact.segment {
		padding: 0
}
.wojo.relaxed.segment {
	padding: calc(var(--unit) * 1.5);
}
.wojo.spaced.card,
.wojo.spaced.segment {
		margin: 2rem 0;
}
.wojo.basic.segment,
.wojo.basic.card,
.wojo.basic.cards > .card {
		box-shadow: none;
}
.wojo.simple.segment {
		border: 0;
}
.wojo.attached.segment,
.wojo.attached.card {
		margin: 0 0 0 0;
}
.wojo.top.attached.segment,
.wojo.top.attached.card {
		margin: 0 0 1rem 0;
}
.wojo.bottom.attached.segment,
.wojo.bottom.attached.card {
		margin: 0 0 1rem 0;
}
.wojo.card.active,
.wojo.segment.active,
.wojo.cards .card.active {
		box-shadow: 0 20px 34px -16px var(--shadow-color);
}
/* == Link == */
a.wojo.segment {
		display: block;
}
a.wojo.card,
a.wojo.segment {
		transition: all .2s ease-in-out;
}
a.wojo.card:hover,
a.wojo.card:hover {
		-webkit-transform: translateY(-.1875rem);
		transform: translateY(-.1875rem)
}
.wojo.card.dimmed,
.wojo.cards .card.dimmed {
		overflow: hidden;
}
/* == Sizes == */
.wojo.small.card > .content,
.wojo.small.card > .header,
.wojo.small.card > .footer,
.wojo.cards .card.small > .content,
.wojo.cards .card.small > .header,
.wojo.cards .card.small > .footer {
		padding: var(--unit-small);
}
.wojo.large.card > .content,
.wojo.large.card > .header,
.wojo.large.card > .footer,
.wojo.cards .card.large > .content,
.wojo.cards .card.large > .header,
.wojo.cards .card.large > .footer {
		padding: calc(var(--unit) * 1.5);
}
.wojo.small.cards {
		margin-left: calc(var(--gutter-compensation) / 2);
}
.wojo.large.cards {
		margin-left: calc(var(--gutter-compensation) * 2);
}
.wojo.small.cards .card {
		margin-left: calc(var(--gutter) / 2);
		margin-bottom: calc(var(--gutter) / 2);
}
.wojo.large.cards .card {
		margin-left: calc(var(--gutter) * 2);
		margin-bottom: calc(var(--gutter) * 2);
}
.wojo.small.segment {
		padding: calc(var(--gutter) / 2);
}
/* == Grid == */
.wojo.cards {
		--card-gutter: var(--gutter);
}
.wojo.small.cards {
		--card-gutter: calc(var(--gutter) / 2);
}
.wojo.large.cards {
		--card-gutter: calc(var(--gutter) * 2);
}
.wojo.cards {
		display: flex;
		flex-flow: row wrap;
		margin-left: var(--gutter-compensation);
		flex-wrap: wrap;
}
.wojo.cards .card {
		position: relative;
		word-wrap: break-word;
		background-color: var(--white-color);
		background-clip: border-box;
		border-radius: 1.5rem;
		margin-left: var(--gutter);
		margin-bottom: var(--gutter);
		box-shadow: 0 .375rem 1.5rem 0 var(--shadow-color);
}
.wojo.cards .card > .content,
.wojo.cards .card > .header,
.wojo.cards .card > .footer {
		padding: calc(var(--unit-mini) * 3);
}
.wojo.cards .card > .header.divided {
		box-shadow: 0 1px 0 0 var(--grey-color-300);
}
.wojo.cards .card > .footer.divided {
		box-shadow: inset 0 1px 0 0 var(--grey-color-300);
}
.wojo.full.cards .card {
		flex-direction: column;
		display: flex;
}
.wojo.full.cards .card > .footer {
		margin-top: auto;
}
.wojo.fof.card {
		text-align: center;
		justify-content: center;
		align-items: center;
		box-shadow: none;
		margin: -2rem;
		overflow: hidden;
		border-radius: 1.5rem;
}
.wojo.fof.card img {
		position: relative;
		z-index: 1
}
.wojo.fof.card .container {
		position: absolute;
		z-index: 2;
}
.wojo.fof.card h1 {
		line-height: 1.5;
		margin: 0;
		color: var(--primary-color);
}
.wojo.fof.card p {
		font-size: 1.5rem;
		line-height: 1.7;
		color: var(--grey-color);
}
/* == Phone == */
@media screen and (max-width: 640px) {
		.wojo.cards {
				flex-wrap: wrap;
		}
		.wojo.cards .card {
				flex: 0 1 100%;
				max-width: 100%;
		}
		.wojo.horizontal.card .wojo.rounded.image {
				border-radius: 1.5rem 1.5rem 0 0;
		}
		.wojo.card > .header.compact {
				padding: 0;
		}
}
/* == Mobile == */
@media screen and (min-width: 641px) and (max-width: 768px) {
		.wojo.cards {
				flex-wrap: wrap;
		}
		.wojo.cards .card {
				flex: 0 1 100%;
				max-width: 100%;
		}
		.wojo.cards.mobile-2 > .card {
				flex: 0 0 calc(50% - var(--gutter));
				max-width: calc(50% - var(--gutter));
		}
		.wojo.cards.mobile-3 > .card {
				flex: 0 0 calc(100% / 3 - var(--gutter));
				max-width: calc(100% / 3 - var(--gutter));
		}
		.wojo.cards.mobile-4 > .card {
				flex: 0 0 calc(25% - var(--gutter));
				max-width: calc(25% - var(--gutter));
		}
		.wojo.cards.mobile-5 > .card {
				flex: 0 0 calc(20% - var(--gutter));
				max-width: calc(20% - var(--gutter));
		}
		.wojo.card > .header.compact {
				padding: 0;
		}
}
/* == Tablet == */
@media screen and (min-width: 769px) and (max-width: 1199px) {
		.wojo.cards.tablet-1,
		.wojo.cards.tablet-2,
		.wojo.cards.tablet-3,
		.wojo.cards.tablet-4,
		.wojo.cards.tablet-5 {
				flex-wrap: wrap;
		}
		.wojo.cards.tablet-1 > .card {
				flex: 0 0 calc(100% - var(--card-gutter));
				max-width: calc(100% - var(--card-gutter));
		}
		.wojo.cards.tablet-2 > .card {
				flex: 0 0 calc(50% - var(--card-gutter));
				max-width: calc(50% - var(--card-gutter));
		}
		.wojo.cards.tablet-3 > .card {
				flex: 0 0 calc(100% / 3 - var(--card-gutter));
				max-width: calc(100% / 3 - var(--card-gutter));
		}
		.wojo.cards.tablet-4 > .card {
				flex: 0 0 calc(25% - var(--card-gutter));
				max-width: calc(25% - var(--card-gutter));
		}
		.wojo.cards.tablet-5 > .card {
				flex: 0 0 calc(20% - var(--card-gutter));
				max-width: calc(20% - var(--card-gutter));
		}
}
/* == Screen == */
@media screen and (min-width: 1200px) {
		.wojo.cards.screen-1,
		.wojo.cards.screen-2,
		.wojo.cards.screen-3,
		.wojo.cards.screen-4,
		.wojo.cards.screen-5 {
				flex-wrap: wrap;
		}
		.wojo.cards.screen-1 > .card {
				flex: 0 0 calc(100% - var(--card-gutter));
				max-width: calc(100% - var(--card-gutter));
		}
		.wojo.cards.screen-2 > .card {
				flex: 0 0 calc(50% - var(--card-gutter));
				max-width: calc(50% - var(--card-gutter));
		}
		.wojo.cards.screen-3 > .card {
				flex: 0 0 calc(100% / 3 - var(--card-gutter));
				max-width: calc(100% / 3 - var(--card-gutter));
		}
		.wojo.cards.screen-4 > .card {
				flex: 0 0 calc(25% - var(--card-gutter));
				max-width: calc(25% - var(--card-gutter));
		}
		.wojo.cards.screen-5 > .card {
				flex: 0 0 calc(20% - var(--card-gutter));
				max-width: calc(20% - var(--card-gutter));
		}
}