Edit
/* scss/6-page-content-elements/_figure.scss */
.m-figure {
max-width: 65ch;
margin: 0;
&__image,
&__image img {
width: 100%;
}
&__title {
margin-bottom: 0.35533rem;
font-family: font(text-sans);
//font-size: 1rem;
font-weight: bold;
}
&__caption {
//font-size: 1rem;
margin-top: 0;
font-family: font(text-sans);
line-height: font(text-line-height);
}
}
// ----------------------------------------
// FIGURE MODIFIER -- RESPONSIVE
// ----------------------------------------
.m-figure.-responsive {
display: flex;
flex-wrap: wrap;
max-width: 75ch;
& .m-figure__content {
flex: 1 1 14em;
}
& .m-figure__link {
display: block;
padding-right: 1.066rem;
}
& .m-figure__caption {
flex: 1 1 19em;
}
}
// ----------------------------------------
// FIGURE MODIFIER -- ICON
// ----------------------------------------
.m-figure--icon {
text-align: center;
& .m-figure__link {
text-align: center;
text-decoration: none;
letter-spacing: 0.02em;
font-family: font(text-serif);
font-size: 1.07rem;
}
&:hover {
& .m-figure__image {
filter: opacity(30%);
-webkit-filter: opacity(30%);
}
}
}
.m-figure,
figure {
max-width: 75ch;
margin: 0;
&__image,
&__image img {
width: 100%;
}
&__image img {
margin-bottom: 0.78rem;
}
&__title {
margin-bottom: 0.35533rem;
font-family: font(text-sans);
//font-size: 1rem;
font-weight: bold;
}
&__caption {
margin-top: 0;
font-family: font(text-sans);
//font-size: 1rem;
line-height: font(text-line-height);
}
}
// .sidebar__item .m-figure.-responsive,
// .o-wm-widget .m-figure.-responsive {
.m-figure.-responsive {
// override base theme settings
display: flex;
justify-content: space-between;
max-width: 100%;
& .m-figure__image {
flex-basis: 240px;
flex-grow: 0;
flex-shrink: 0;
margin-right: 20px;
}
& .m-figure__caption {
flex-basis: calc(100% - 260px);
flex-grow: 1;
flex-shrink: 1;
margin-top: 0;
@include breakpoint($widget-mobile-to-tablet-breakpoint) {
margin-top: 1em;
}
@include breakpoint($desktop-to-wide-desktop-breakpoint) {
margin-top: 0;
}
& > p {
margin-top: 0;
}
}
}
