@import "variables";
img {
display: block;
max-width: 100%;
height: auto;
&.center {
margin-left: auto;
margin-right: auto;
}
&.left {
margin-right: auto;
}
&.right {
margin-left: auto;
}
}
figure {
display: block;
width: fit-content;
max-width: 100%;
min-width: min(300px, 100%);
text-align: center;
figcaption {
background: var(--background);
caption-side: bottom;
color: var(--accent);
display: block;
font-size: 14px;
margin-top: 5px;
padding: 5px 10px;
}
&.size-small img,
&.size-small svg {
max-width: 42.5%;
}
&.size-medium img,
&.size-medium svg {
max-width: 57.5%;
}
&.size-large img,
&.size-large svg {
max-width: 72.5%;
}
&.center {
margin: 25px auto;
figcaption {
text-align: center;
}
}
&.left {
img,
svg {
float: left;
}
figcaption {
text-align: left;
}
}
&.right {
img,
svg {
float: right;
}
figcaption {
text-align: right;
}
}
}