File: D:/HostingSpaces/SBogers10/farmfun.komma.pro/resources/sass/site/6-Organisms/_organisms.quote.scss
$o-quote-bp1: 850;
$o-quote-bp2: 1060;
.o-quote {
@include slant(true);
@include template(content, image);
@include vspacing('padding-top' 0.75, 'padding-bottom' 0.75);
background-color: palette(secondary, 900);
color: palette(neutral, 0);
padding-top: calc(var(--slant-height) + #{space(5)}) !important;
}
.o-quote__main {
@include contain;
display: grid;
grid-template-rows: auto auto;
grid-row-gap: space(4);
grid-template-areas:
"content"
"image";
@include mq($o-quote-bp1) {
grid-template-rows: auto;
grid-template-columns: 5fr 1fr 6fr;
grid-template-areas:
"content . image";
}
@include mq($o-quote-bp2) {
grid-template-columns: 1fr 5fr 1fr 5fr;
grid-template-areas:
". content . image";
}
}
.o-quote__content {
margin: 0; //reset blockquote styling
}
.o-quote__text {
position: relative;
margin-top: space(3);
quotes: "\201C" "\201D" "\2018" "\2019";
&::before,
&::after {
@include font-size(xl);
@include font-weight(bold);
@include font-family(primary);
position: absolute;
color: palette(primary);
}
&::before {
content: open-quote;
left: space(-3);
top: 0;
}
&::after {
content: close-quote;
right: space(-3);
bottom: 0;
}
}
.o-quote__author {
@include font-weight(bold);
margin-top: space(4);
}
.o-quote__function {
@include font-weight(semi-bold);
@include font-size(s);
color: palette(neutral, 400);
margin-top: space(1);
}
.o-quote__function {
margin-top: space(1);
}