/*
NOTE:

Use this file to add overrides.

First, check if there a variable you could use instead.

https://github.com/reaktivstudios/rkv-component-library/blob/master/src/styles/components/_rkv-block-pull-quote.scss

UI example here:

https://ui.reaktivstudios.com/storybook/?path=/story/pullquote--default
*/

.rkv-block-column-pullquote {
	margin-bottom: 3rem;
	margin-top:3rem;
	@include touch{
		margin-bottom: 2rem;
		margin-top:3rem;
	}
	.pullquote-wrapper {
		padding: 0 !important;
	}
	.rkv-block-media {
		display:flex;
		flex-direction: row;
		.rkv-block-media__figure {
			flex-basis: 60%;
			margin-bottom: 0;
			img{
				display:block;
				height: 100%;
				width:100%;
				object-fit:cover;
			}

			&.hide-mobile {

				@include mobile {
					display: none !important;
				}
				
			}
		}

		.rkv-block-media__content {
			display: flex;
			align-self: center;
			flex-basis: 40%;
			@include touch {
				max-width: 100% !important;
				flex-basis: auto;
			}
			@include mobile{
				max-width: 100% !important;
				flex-basis: auto;
			}
			blockquote {
				padding: 6.5rem 1.5rem 5rem 10.55rem;
				margin-top:0;
				margin-bottom:0;
				background:$white;
				color:$black;
				display:flex;
				flex-direction: column;
				justify-content: center;
				align-items: flex-start;
				@include mobile{
					padding:9rem 2.5rem 1rem 2.5rem;
				}
				&:before {
					content: '';
					background-image: url("data:image/svg+xml,%3Csvg width='104' height='96' viewBox='0 0 104 96' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M99 32.25H79.25V19.25L80.5 18H96.25V1.5H69.25L54.75 16V73.75H89M1.5 73.75V16L16 1.5H43V18H27.25L26 19.25V32.25H43V73.75H1.5Z' stroke='%23CFB991' stroke-width='3'/%3E%3Cline x1='83.6639' y1='95.5252' x2='102.567' y2='17.7905' stroke='black' stroke-width='2.75'/%3E%3C/svg%3E%0A");         
					left: 60px;
					top: 80px;
					@include mobile {
						top: 2.5rem;
						left: 1rem;
					}  
				}
				span {
					display: block;
					margin-bottom: 22px;
					font-family: acumin-pro !important;
				}
			}
		}
		@include touch {
			flex-direction: column;
		}
		&.is-row-reversed{
			@media screen and (min-width: 1200px) {
				flex-direction: row-reverse;
			}
		}
		
	}
	
}
