/* Layouts */
/* LAYOUT 1 */
.quote-block.layout_1 {
background-color: #1075B3;
color: var(--wp--preset--color--white);
/* clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%); */
position: relative;
padding-bottom: calc(var(--padding) + (var(--padding)/2)) !important;
& .bg {
height: auto;
position: absolute;
right: -40%;
top: 65%;
transform: translateY(-50%);
width: 100%;
object-fit: cover;
object-position: center;
z-index: -1;
path {
fill: var(--wp--preset--color--blue);
}
}
&::before {
content: '';
mix-blend-mode: normal;
background: linear-gradient(67deg, #002750 0%, rgba(0, 39, 80, 0.00) 88.16%);
/* background: linear-gradient(67deg, #002750 33.76%, rgba(0, 39, 80, 0.00) 88.16%); */
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 0;
}
&::after {
content: '';
mix-blend-mode: normal;
background: linear-gradient(67deg, #002750 0%, rgba(0, 39, 80, 0.00) 88.16%);
/* background: linear-gradient(67deg, #002750 33.76%, rgba(0, 39, 80, 0.00) 88.16%); */
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 0;
}
}
.quote-block.layout_1 .wp-block-buttons .wp-block-button__link {
background-color: var(--wp--preset--color--blue);
color: var(--wp--preset--color--white);
}
.quote-block.layout_1 .quotation {
position: relative;
z-index: 2;
}
.quote-block.layout_1 .quotation::before {
content: '';
background-size: contain;
background-repeat: no-repeat;
background-image: url('data:image/svg+xml,');
position: absolute;
top: -40px;
width: 120px;
height: 95px;
left: -90px;
opacity: 0.2;
}
.quote-block.layout_1 .quotation::after {
content: '';
background-size: contain;
background-repeat: no-repeat;
background-image: url('data:image/svg+xml,');
position: absolute;
bottom: calc(-1 * 95px);
width: 120px;
height: 95px;
right: 0px;
opacity: 0.2;
}
/* LAYOUT 2 */
.quote-block.layout_2 {
&::before {
content: '';
background-color: var(--wp--preset--color--navy);
bottom: 0;
height: 90px;
left: 50%;
position: absolute;
transform: translateX(-50%);
width: 2px;
z-index: 2;
@media screen and (max-width: 662px) {
height: 45px;
}
}
}
.quote-block.layout_2 .wp-block-columns .wp-block-column {
align-items: center;
}
.quote-block.layout_2 .wp-block-columns .wp-block-column .content {
height: auto !important;
}
.quote-block.layout_2 .wp-block-buttons .wp-block-button__link {
border: 0px solid var(--wp--preset--color--white) !important;
background-color: var(--wp--preset--color--navy);
color: var(--wp--preset--color--white);
&:hover {
border: 0px solid var(--wp--preset--color--white) !important;
background-color: var(--wp--preset--color--blue) !important;
}
}
.quote-block.layout_2 .wp-block-column .image {
max-height: 450px;
}
.quote-block .container {
position: relative;
z-index: 2;
}
.quote-block .wp-block-columns {
align-items: stretch;
gap: 20px;
}
.quote-block .wp-block-columns .wp-block-column {
display: flex;
align-items: center;
flex-basis: calc(50% - 10px);
}
/* Media */
.quote-block .wp-block-column .image {
align-self: center;
aspect-ratio: 1 / 1;
border-radius: 50%;
height: 100%;
margin-left: auto;
margin-right: auto;
max-height: 350px;
width: auto;
position: relative;
}
.quote-block .wp-block-column .video-block {
background-color: transparent !important;
}
.quote-block .wp-block-column .video-block .video-poster {
aspect-ratio: 1 / 1;
border-radius: 50%;
height: 100%;
width: auto;
align-self: center;
}
.quote-block .wp-block-column .video-block .video-poster {
/* top: 50%;
transform: translate(-50%, -50%); */
position: relative;
}
.quote-block .wp-block-column .video-block .video-poster iframe {
height: 120%;
transform: translateY(-50%);
}
.quote-block .wp-block-column .image img {
border-radius: 50%;
height: 100% !important;
object-fit: cover;
object-position: center;
width: 100%;
}
.quote-block .wp-block-column .image svg {
height: 100% !important;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
/* Content */
.quote-block .wp-block-column:only-child {
&.content-column {
display: flex;
justify-content: center;
text-align: center;
}
&.content-column .content {
max-width: 600px;
}
}
.quote-block .wp-block-column.content-column {
padding-left: calc(var(--padding) + 10px);
}
.quote-block .wp-block-column.content-column .content {
height: auto;
text-align: left;
width: 100%;
}
.quote-block .wp-block-column.content-column .content {
justify-self: start;
}
.quote-block.layout_1 .wp-block-column .content > * {
color: var(--wp--preset--color--white);
width: 100%;
}
.quote-block .wp-block-column .content > *:only-child,
.quote-block .wp-block-column .content > *:last-child {
margin-bottom: 0;
}
/* .quote-block .wp-block-column .content h2 {
margin-bottom: 10px !important;
} */
.quote-block .wp-block-column .content h3 {
margin-bottom: 20px !important;
}
.quote-block.layout_2 .wp-block-column .content h3 {
color: var(--wp--preset--color--blue);
}
.quote-block .wp-block-column .content p {
font-size: 18px;
}
@media screen and (max-width: 1188px) {
.quote-block .wp-block-column.content-column {
padding-left: var(--padding);
}
.quote-block .wp-block-column .content p {
font-size: 18px;
}
.quote-block .quotation::before {
height: 95px;
left: -40px;
top: -10px;
width: 60px;
}
.quote-block .quotation::after {
bottom: calc(-1 * 35px);
height: 45px;
width: 60px;
}
}
@media screen and (max-width: 992px) {
.quote-block .wp-block-columns {
gap: 0;
flex-direction: column;
align-items: center !important;
}
.quote-block .wp-block-columns .wp-block-column {
flex-basis: 100%;
}
.quote-block .wp-block-column.content-column {
padding: var(--padding);
padding-bottom: calc(var(--padding) * 2.5);
}
.quote-block .wp-block-column.content-column .content {
max-width: 100%;
gap: 0;
text-align: center;
}
.quote-block .wp-block-column .content h2::before,
.quote-block .wp-block-column .content h2::after {
width: 44px;
height: 35px;
}
.quote-block .wp-block-column .content h2::before {
top: -50px;
}
.quote-block .wp-block-column .content h2::after {
bottom: -50px;
}
.quote-block .wp-block-column .content p {
padding-top: 10px;
}
.quote-block .wp-block-column .content .wp-block-buttons {
justify-content: center;
}
.quote-block .wp-block-column .image {
height: auto;
max-width: 500px;
min-height: auto;
width: 100%;
}
}
@media screen and (max-width: 662px) {
/* .quote-block {
margin-bottom: calc(var(--padding)*2) !important;
} */
.quote-block .wp-block-columns {
padding-top: 30px;
}
.quote-block .wp-block-column.content-column {
padding: 30px 0 70px !important;
}
.quote-block h2 {
margin-bottom: 15px !important;
}
.quote-block h3 {
margin-bottom: 30px !important;
}
.quote-block .wp-block-column .content p {
font-size: 18px;
padding-top: 0 !important;
}
.quote-block .quotation::before,
.quote-block .quotation::after {
display: none;
}
}
.quote-block > .image {
height: 100%;
mix-blend-mode: overlay;
opacity: 0.1;
position: absolute;
top: 0;
right: 0;
width: 100%;
z-index: 0;
background-position: 35vw 42%;
background-repeat: no-repeat;
background-size: 140vw;
background-image: url('data:image/svg+xml,');
}