div {
	.case-studies-wrapper {
		&:first-child {
			.column {
				&:first-child {
					@include media-breakpoint-down(sm) {
						padding-top: 1rem;
					}
				}
			}
		}
		&:last-child {
			.column {
				&:last-child {
					@include media-breakpoint-down(sm) {
						padding-bottom: 1rem;
					}
				}
			}
		}
	}
}

.case-studies-wrapper {
	.column {
		@include media-breakpoint-down(sm) {
			padding-top: 0.5rem;
			padding-bottom: 0.5rem;
		}
		@include media-breakpoint-up(md) {
			padding: 0.65rem;
		}

		max-width: 380px !important;
	}
	.case-study-overlay-wrapper {
		.case-study-column {
			.overlay-image {
				text-align: center;
				&:after {
					content: "";
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					visibility: visible;
					@include media-breakpoint-down(md) {
						background-color: rgba(80, 80, 80, 0.75);
					}
					-webkit-transition: background-color .5s ease-in-out;
					-moz-transition: background-color .5s ease-in-out;
					transition: background-color .5s ease-in-out;
				}
				img {
					-webkit-transition: transform .5s ease-in-out;
					-moz-transition: transform .5s ease-in-out;
					transition: transform .5s ease-in-out;
				}
				@include media-breakpoint-up(md) {
					&:hover {
						&:after {
							background-color: rgba(80, 80, 80, 0.75);
							-webkit-transition: background-color .5s ease-in-out;
							-moz-transition: background-color .5s ease-in-out;
							transition: background-color .5s ease-in-out;
						}
						img {
							transform: scale(1.1);
							-webkit-transition: transform .5s ease-in-out;
							-moz-transition: transform .5s ease-in-out;
							transition: transform .5s ease-in-out;
						}
						.overlay-text {
							display: block;
						}
					}
				}
			}
			@include media-breakpoint-up(md) {
				.overlay-image.changed {
					&:after {
						background-color: rgba(80, 80, 80, 0.75);
						-webkit-transition: background-color .5s ease-in-out;
						-moz-transition: background-color .5s ease-in-out;
						transition: background-color .5s ease-in-out;
					}
					img {
						transform: scale(1.1);
						-webkit-transition: transform .5s ease-in-out;
						-moz-transition: transform .5s ease-in-out;
						transition: transform .5s ease-in-out;
					}
				}
				&:hover {
					.case-study-title, .case-study-description {
						opacity: 1;
                        -webkit-transition-delay: 0.05s;
                        transition-delay: 0.05s;
                        -webkit-transition-duration: 0.35s;
                        transition-duration: 0.35s;
					}
				}
			}
            .case-study-title {
                left: 50%;
                -webkit-transform: translate(-50%, 50%);
                transform: translate(-50%, 50%);
                width: 80%;
                font-size: 1rem;
                letter-spacing: 1px;
                margin-bottom: 0;
                padding-bottom: 0.5rem;
                color: $white;
				top: 20%;
				@include media-breakpoint-down(xl) {
					padding-bottom: 1rem;
				}
				@include media-breakpoint-up(lg) {
					opacity: 0;
                    -webkit-transition: opacity 0.2s, -webkit-transform 0.35s;
                    transition: opacity 0.2s, transform 0.35s;
				}
				@include media-breakpoint-only(md) {
					padding-bottom: 1.75rem;
				}
                @include media-breakpoint-down(sm) {
					font-size: 0.75rem;
					padding: 0 1rem 0.5rem;
                }
            }
            .case-study-description {
                letter-spacing: 1px;
                margin-bottom: 0;
                padding: 0 1.5rem;
				color: $white;
				@include media-breakpoint-up(xl) {
					top: 55%;
				}
				@include media-breakpoint-up(lg) {
					font-size: 0.6rem;
					opacity: 0;
					-webkit-transition: opacity 0.2s, -webkit-transform 0.35s;
                    transition: opacity 0.2s, transform 0.35s;
				}
				@include media-breakpoint-down(lg) {
					top: 60%;
				}
				@include media-breakpoint-down(md) {
					top: 50%;
					font-size: 1rem;
				}
                @include media-breakpoint-down(sm) {
					top: 50%;
                    padding: 0 1rem;
                }
            }
            .case-study-button {
                border: 1px solid $darker-primary;
				padding: 0.25rem 0.75rem;
				@include media-breakpoint-down(sm) {
					background-color: $darker-primary;
					color: $white;
				}
				@include media-breakpoint-down(sm) {
					font-size: 0.75rem;
				}
                &:hover {
                    background-color: $darker-primary;
                    color: $white;
                    text-decoration: none;
                }
            }
		}
	}
}