.skulpt-image-text {
	display: flex;
	column-gap: 100px;
}
@media (min-width: 900px) {
	.skulpt-image-text {
		align-items: center;
		margin: 100px 0;
	}
	.skulpt-image-text.align-left {
		flex-direction: row;
		padding: 0 100px 0 50px;
	}
	.skulpt-image-text.align-right {
		flex-direction: row-reverse;
		padding: 0 50px 0 100px;
	}
}
@media (max-width: 899.99px) {
	.skulpt-image-text {
		flex-direction: column;
		padding: 0 25px;
		margin: 75px 0;
	}
}

/*-------------------------------------------------------------------------------------------*/

.skulpt-image-text > .image { position: relative; }
.skulpt-image-text > .image > .media-element { position: absolute; top: 0; left: 0; }
@media (min-width: 900px) {
	.skulpt-image-text > .image {
		min-height: 600px;
		flex: 0 0 calc(50% - 25px);
		align-self: stretch;
	}
}
@media (max-width: 899.99px) {
	.skulpt-image-text > .image {
		min-height: calc(145vw - 50px);
		max-height: 450px;
	}
}

/*-------------------------------------------------------------------------------------------*/

.skulpt-image-text > .content {
	display: flex; flex: 1;
	flex-direction: column;
	row-gap: 50px;
}
.skulpt-image-text.align-left > .content { align-items: flex-start; }
.skulpt-image-text.align-right > .content { align-items: flex-end; }
@media (min-width: 900px)	 { .skulpt-image-text > .content { padding: 100px 0; } }
@media (max-width: 899.99px) { .skulpt-image-text > .content { margin-top: 50px; } }

/*-------------------------------------------------------------------------------------------*/

.skulpt-image-text > .content > .paragraph { max-width: 380px; }
.skulpt-image-text.align-left > .content > .paragraph { text-align: left; }
.skulpt-image-text.align-right > .content > .paragraph { text-align: right; }
.skulpt-image-text > .content > .paragraph > .title {
	text-transform: uppercase;
	font-weight: 400;
}
.skulpt-image-text > .content > .paragraph > .content {}
.skulpt-image-text > .content > .paragraph > .content > a {
    display: inline-block;
	margin-top: 45px;
	
	background-image: linear-gradient(to bottom, rgba(255,255,255,0) calc(100% - .75px), currentColor calc(100% - .75px), currentColor 100%);
	background-size: 0% 100%;
	background-repeat: no-repeat;
	background-position: bottom right;
    background-origin: content-box;
	
	transition: background-size .4s ease-out;
	
	text-decoration: none;
	cursor: pointer;
}
.skulpt-image-text > .content > .paragraph > .content > a:hover {
	background-size: 100% 100%;
	background-position: bottom left;
}
.skulpt-image-text.align-left > .content > .paragraph > .content > a + a { margin-right: 35px; }
.skulpt-image-text.align-right > .content > .paragraph > .content > a + a { margin-left: 35px; }
@media (min-width: 900px) {
	.skulpt-image-text > .content > .paragraph > .title { font-size: 32px; }
	.skulpt-image-text > .content > .paragraph > .content { font-size: 18px; }
}
@media (max-width: 899.99px) {
	.skulpt-image-text > .content > .paragraph > .title { font-size: 24px; }
	.skulpt-image-text > .content > .paragraph > .content { font-size: 16px; }
}