.sphere
	overflow: hidden
	&__content
		+relative()
		z-index: 1
		&:before
			content: ""
			+absolute(45px, null, null, -10%)
			+size(120%, 100%)
			background-color: $color-brand-2
			
			z-index: -1
		+min(sm)
			justify-content: center

	&__item
		margin: 0 auto 30px

		+relative()

		+min(md)
			max-width: 250px

		&-header
			margin-bottom: 10px
			+size(180px)

			+max(sm)
				+margin-x(auto)

		&-image
			+size(100%)
			object-fit: cover
			filter: grayscale(1)

			+transition()
		
		&:hover &-image,
		&_active &-image
			filter: grayscale(0)

		&-content
			color: $color-white
			
			font-size: 19px
			line-height: 1.1

			+font('pb')

			+transition()

			+max(sm)
				text-align: center

			+min(lg)
				font-size: 15px

		&:hover &-content,
		&_active &-content
			color: $color-black