No notes defined.
<section class=" layer -testimonial">
<div class="layer__container container">
<figure class="testimonial">
<blockquote class="testimonial__quote">
It was an honor to work with Imarc. They demonstrated, very early on, a true ability to understand our business and solve for our needs—create a new intranet site, one that would increase engagement and foster community. Imarc delivered incredible results, taking our former site to new heights. We couldn’t be happier with their work and subject matter expertise.
</blockquote>
<figcaption class="testimonial__caption">
<div class="avatar -horizontal testimonial__attribution">
<img class="avatar__photo" src="/media/dossier-1.jpg" alt="Jane Doe" />
<div class="avatar__info">
<h2 class="avatar__name">
Jane Doe
</h2>
<div class="avatar__title">
Executive Vice President of Operations
</div>
</div>
</div>
</figcaption>
</figure>
</div>
</section>
.layer {
align-items: center;
display: grid;
grid-template: "stack";
grid-template-columns: minmax(0, 1fr);
&__container {
padding-top: 4rem;
padding-bottom: 4rem;
width: 100%;
}
.layer__content {
display: flex;
flex-direction: column;
> :first-child:last-child {
margin-left: auto;
margin-right: auto;
}
}
&__background,
&__container {
grid-area: stack;
}
&__background {
align-self: stretch;
position: relative;
}
&__backgroundImg {
height: 100%;
object-fit: cover;
width: 100%;
}
&__header {
margin-bottom: 2rem;
}
&__heading,
&__subheading {
margin-bottom: 0;
}
&__introduction {
&.-emphasized {
font-size: 1.125rem;
}
}
&__item {
&.-sidebar {
background-color: $blue-200;
padding: $padding;
.field {
@extend .field, .-outlined;
}
}
}
&__actions {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: $h-space;
&.-centered {
justify-content: center;
}
}
&__action {
@include button($white, $primary);
font-weight: bold;
}
&.-dark {
background-color: $blue-900;
color: $white;
.layer__background::before {
background: linear-gradient(to right, $blue-900 calc(50% - min(#{divide($container, 2)}, 50vw)), transparent);
bottom: 0;
content: '';
left: 0;
position: absolute;
right: 0;
top: 0;
}
}
@include color-modifiers((
primary,
secondary,
lightGray $gray-100,
)) using ($color) {
background-color: $color;
color: blackwhite($color);
}
@include at(lg) {
.layer__content.-columns {
flex-direction: row;
}
.layer__item {
flex: 1;
margin-right: gutter();
&:last-child {
margin-right: 0;
}
/**
* This is Candlepin's grid-utilities mixin. It adds the following
* modifier classes to .layer__item:
*
* .-gutter
* .-gutter-1 through .gutter-12 (the configured # of columns)
* .-span-1 through .-span-12
* .-left-1 through .-left-12
* .-right-1 through .-right-12
*
* These can be used to quickly space out, offset, or define other custom column widths for .layer__item elements with .layer__content.-columns.
*
*/
@include grid-utilities;
}
}
}