add new image formats

source/_patterns/01-molecules/22-images/images.mustache

-{{> atoms-image(classes: "mx-auto my-6 lg:max-w-[800px] max-w-full object-contain") }}
-{{> atoms-image(classes: "float-left mr-4 mb-6 lg:max-w-[400px] max-w-full object-contain") }}
-{{> atoms-image(classes: "float-left mr-4 mb-6 object-contain") }}
-{{> atoms-image(classes: "float-right ml-4 mb-6 lg:max-w-[400px] max-w-full object-contain") }}
-{{> atoms-image(classes: "float-right ml-4 mb-6 object-contain") }}
+{{> atoms-image(classes: "w-full mx-auto my-6 object-contain h-max lg:h-max lg:w-auto") }}
+{{> atoms-image(classes: "float-left mr-4 mb-6 max-w-[400px] mt-0 sm:max-w-full object-contain") }}
+{{> atoms-image(classes: "float-left mr-4 mb-6 mt-0 object-contain") }}
+{{> atoms-image(classes: "float-right ml-4 mb-6 max-w-[400px] mt-0 sm:max-w-full object-contain") }}
+{{> atoms-image(classes: "float-right ml-4 mb-6 mt-0 object-contain") }}

source/icons/style.scss

+@import "variables";
+
+@font-face {
+  font-family: '#{$icomoon-font-family}';
+  src:  url('#{$icomoon-font-path}/#{$icomoon-font-family}.eot?bna028');
+  src:  url('#{$icomoon-font-path}/#{$icomoon-font-family}.eot?bna028#iefix') format('embedded-opentype'),
+    url('#{$icomoon-font-path}/#{$icomoon-font-family}.ttf?bna028') format('truetype'),
+    url('#{$icomoon-font-path}/#{$icomoon-font-family}.woff?bna028') format('woff'),
+    url('#{$icomoon-font-path}/#{$icomoon-font-family}.svg?bna028##{$icomoon-font-family}') format('svg');
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+
+[class^="ico--"], [class*=" ico--"] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: '#{$icomoon-font-family}' !important;
+  speak: never;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.ico--twitter {
+  &:before {
+    content: $ico--twitter; 
+  }
+}
+.ico--mastodon {
+  &:before {
+    content: $ico--mastodon; 
+  }
+}
+.ico--helios {
+  &:before {
+    content: $ico--helios; 
+  }
+}
+.ico--redmine {
+  &:before {
+    content: $ico--redmine; 
+  }
+}
+.ico--zulip {
+  &:before {
+    content: $ico--zulip; 
+  }
+}
+.ico--forum {
+  &:before {
+    content: $ico--forum; 
+  }
+}
+.ico--pirati {
+  &:before {
+    content: $ico--pirati; 
+  }
+}
+.ico--jitsi {
+  &:before {
+    content: $ico--jitsi; 
+  }
+}
+.ico--open-source {
+  &:before {
+    content: $ico--open-source; 
+  }
+}
+.ico--donation-full {
+  &:before {
+    content: $ico--donation-full; 
+  }
+}
+.ico--donation-outline {
+  &:before {
+    content: $ico--donation-outline; 
+  }
+}
+.ico--strategy {
+  &:before {
+    content: $ico--strategy; 
+  }
+}
+.ico--pig {
+  &:before {
+    content: $ico--pig; 
+  }
+}
+.ico--thermometer {
+  &:before {
+    content: $ico--thermometer; 
+  }
+}
+.ico--menu {
+  &:before {
+    content: $ico--menu; 
+  }
+}
+.ico--chevron-right {
+  &:before {
+    content: $ico--chevron-right; 
+  }
+}
+.ico--chevron-left {
+  &:before {
+    content: $ico--chevron-left; 
+  }
+}
+.ico--chevron-down {
+  &:before {
+    content: $ico--chevron-down; 
+  }
+}
+.ico--chevron-up {
+  &:before {
+    content: $ico--chevron-up; 
+  }
+}
+.ico--link-horizontal {
+  &:before {
+    content: $ico--link-horizontal; 
+  }
+}
+.ico--beer {
+  &:before {
+    content: $ico--beer; 
+  }
+}
+.ico--food {
+  &:before {
+    content: $ico--food; 
+  }
+}
+.ico--dots-three-vertical {
+  &:before {
+    content: $ico--dots-three-vertical; 
+  }
+}
+.ico--dots-three-horizontal {
+  &:before {
+    content: $ico--dots-three-horizontal; 
+  }
+}
+.ico--log-out {
+  &:before {
+    content: $ico--log-out; 
+  }
+}
+.ico--envelope {
+  &:before {
+    content: $ico--envelope; 
+  }
+}
+.ico--pin {
+  &:before {
+    content: $ico--pin; 
+  }
+}
+.ico--at {
+  &:before {
+    content: $ico--at; 
+  }
+}
+.ico--glass {
+  &:before {
+    content: $ico--glass; 
+  }
+}
+.ico--checkmark {
+  &:before {
+    content: $ico--checkmark; 
+  }
+}
+.ico--info {
+  &:before {
+    content: $ico--info; 
+  }
+}
+.ico--question {
+  &:before {
+    content: $ico--question; 
+  }
+}
+.ico--warning {
+  &:before {
+    content: $ico--warning; 
+  }
+}
+.ico--code {
+  &:before {
+    content: $ico--code; 
+  }
+}
+.ico--checkbox-unchecked {
+  &:before {
+    content: $ico--checkbox-unchecked; 
+  }
+}
+.ico--star-full {
+  &:before {
+    content: $ico--star-full; 
+  }
+}
+.ico--star-empty {
+  &:before {
+    content: $ico--star-empty; 
+  }
+}
+.ico--bookmark {
+  &:before {
+    content: $ico--bookmark; 
+  }
+}
+.ico--cog {
+  &:before {
+    content: $ico--cog; 
+  }
+}
+.ico--key {
+  &:before {
+    content: $ico--key; 
+  }
+}
+.ico--zoom-in {
+  &:before {
+    content: $ico--zoom-in; 
+  }
+}
+.ico--zoom-out {
+  &:before {
+    content: $ico--zoom-out; 
+  }
+}
+.ico--shrink {
+  &:before {
+    content: $ico--shrink; 
+  }
+}
+.ico--printer {
+  &:before {
+    content: $ico--printer; 
+  }
+}
+.ico--file-openoffice {
+  &:before {
+    content: $ico--file-openoffice; 
+  }
+}
+.ico--user {
+  &:before {
+    content: $ico--user; 
+  }
+}
+.ico--file-excel {
+  &:before {
+    content: $ico--file-excel; 
+  }
+}
+.ico--file-word {
+  &:before {
+    content: $ico--file-word; 
+  }
+}
+.ico--file-pdf {
+  &:before {
+    content: $ico--file-pdf; 
+  }
+}
+.ico--file-picture {
+  &:before {
+    content: $ico--file-picture; 
+  }
+}
+.ico--file-blank {
+  &:before {
+    content: $ico--file-blank; 
+  }
+}
+.ico--folder-upload {
+  &:before {
+    content: $ico--folder-upload; 
+  }
+}
+.ico--upload {
+  &:before {
+    content: $ico--upload; 
+  }
+}
+.ico--cloud-upload {
+  &:before {
+    content: $ico--cloud-upload; 
+  }
+}
+.ico--folder-download {
+  &:before {
+    content: $ico--folder-download; 
+  }
+}
+.ico--download {
+  &:before {
+    content: $ico--download; 
+  }
+}
+.ico--cloud-download {
+  &:before {
+    content: $ico--cloud-download; 
+  }
+}
+.ico--alarm {
+  &:before {
+    content: $ico--alarm; 
+  }
+}
+.ico--calculator {
+  &:before {
+    content: $ico--calculator; 
+  }
+}
+.ico--facebook-full {
+  &:before {
+    content: $ico--facebook-full; 
+  }
+}
+.ico--feed {
+  &:before {
+    content: $ico--feed; 
+  }
+}
+.ico--library {
+  &:before {
+    content: $ico--library; 
+  }
+}
+.ico--office {
+  &:before {
+    content: $ico--office; 
+  }
+}
+.ico--attachment {
+  &:before {
+    content: $ico--attachment; 
+  }
+}
+.ico--enlarge {
+  &:before {
+    content: $ico--enlarge; 
+  }
+}
+.ico--eye-off {
+  &:before {
+    content: $ico--eye-off; 
+  }
+}
+.ico--eye {
+  &:before {
+    content: $ico--eye; 
+  }
+}
+.ico--share {
+  &:before {
+    content: $ico--share; 
+  }
+}
+.ico--search {
+  &:before {
+    content: $ico--search; 
+  }
+}
+.ico--pencil {
+  &:before {
+    content: $ico--pencil; 
+  }
+}
+.ico--lock-open {
+  &:before {
+    content: $ico--lock-open; 
+  }
+}
+.ico--lock {
+  &:before {
+    content: $ico--lock; 
+  }
+}
+.ico--equalizer {
+  &:before {
+    content: $ico--equalizer; 
+  }
+}
+.ico--switch {
+  &:before {
+    content: $ico--switch; 
+  }
+}
+.ico--loop {
+  &:before {
+    content: $ico--loop; 
+  }
+}
+.ico--refresh {
+  &:before {
+    content: $ico--refresh; 
+  }
+}
+.ico--bullhorn {
+  &:before {
+    content: $ico--bullhorn; 
+  }
+}
+.ico--bin {
+  &:before {
+    content: $ico--bin; 
+  }
+}
+.ico--cross {
+  &:before {
+    content: $ico--cross; 
+  }
+}
+.ico--checkbox-checked {
+  &:before {
+    content: $ico--checkbox-checked; 
+  }
+}
+.ico--globe {
+  &:before {
+    content: $ico--globe; 
+  }
+}
+.ico--wikipedia {
+  &:before {
+    content: $ico--wikipedia; 
+  }
+}
+.ico--youtube {
+  &:before {
+    content: $ico--youtube; 
+  }
+}
+.ico--users {
+  &:before {
+    content: $ico--users; 
+  }
+}
+.ico--book {
+  &:before {
+    content: $ico--book; 
+  }
+}
+.ico--bubbles {
+  &:before {
+    content: $ico--bubbles; 
+  }
+}
+.ico--map {
+  &:before {
+    content: $ico--map; 
+  }
+}
+.ico--compass {
+  &:before {
+    content: $ico--compass; 
+  }
+}
+.ico--folder-open {
+  &:before {
+    content: $ico--folder-open; 
+  }
+}
+.ico--folder {
+  &:before {
+    content: $ico--folder; 
+  }
+}
+.ico--drawer {
+  &:before {
+    content: $ico--drawer; 
+  }
+}
+.ico--stop {
+  &:before {
+    content: $ico--stop; 
+  }
+}
+.ico--github {
+  &:before {
+    content: $ico--github; 
+  }
+}
+.ico--clock {
+  &:before {
+    content: $ico--clock; 
+  }
+}
+.ico--calendar {
+  &:before {
+    content: $ico--calendar; 
+  }
+}
+.ico--flickr {
+  &:before {
+    content: $ico--flickr; 
+  }
+}
+.ico--instagram {
+  &:before {
+    content: $ico--instagram; 
+  }
+}
+.ico--newspaper {
+  &:before {
+    content: $ico--newspaper; 
+  }
+}
+.ico--cart {
+  &:before {
+    content: $ico--cart; 
+  }
+}
+.ico--home {
+  &:before {
+    content: $ico--home; 
+  }
+}
+.ico--link {
+  &:before {
+    content: $ico--link; 
+  }
+}
+.ico--power {
+  &:before {
+    content: $ico--power; 
+  }
+}
+.ico--rocket {
+  &:before {
+    content: $ico--rocket; 
+  }
+}
+.ico--location {
+  &:before {
+    content: $ico--location; 
+  }
+}
+.ico--phone {
+  &:before {
+    content: $ico--phone; 
+  }
+}
+.ico--linkedin {
+  &:before {
+    content: $ico--linkedin; 
+  }
+}
+.ico--facebook {
+  &:before {
+    content: $ico--facebook; 
+  }
+}
+.ico--envelop {
+  &:before {
+    content: $ico--envelop; 
+  }
+}
+.ico--file-text2 {
+  &:before {
+    content: $ico--file-text2; 
+  }
+}
+.ico--price-tag {
+  &:before {
+    content: $ico--price-tag; 
+  }
+}
+.ico--price-tags {
+  &:before {
+    content: $ico--price-tags; 
+  }
+}
+.ico--stats-dots {
+  &:before {
+    content: $ico--stats-dots; 
+  }
+}
+.ico--bed {
+  &:before {
+    content: $ico--bed; 
+  }
+}
+.ico--train {
+  &:before {
+    content: $ico--train; 
+  }
+}
+.ico--bus {
+  &:before {
+    content: $ico--bus; 
+  }
+}
+.ico--wheelchair {
+  &:before {
+    content: $ico--wheelchair; 
+  }
+}
+.ico--thumbs-down {
+  &:before {
+    content: $ico--thumbs-down; 
+  }
+}
+.ico--thumbs-up {
+  &:before {
+    content: $ico--thumbs-up; 
+  }
+}
+.ico--anchor {
+  &:before {
+    content: $ico--anchor; 
+  }
+}
+.ico--paw {
+  &:before {
+    content: $ico--paw; 
+  }
+}
+

source/icons/variables.scss

+$icomoon-font-family: "pirati-ui" !default;
+$icomoon-font-path: "fonts" !default;
+
+$ico--twitter: "\e977";
+$ico--mastodon: "\e973";
+$ico--helios: "\e96e";
+$ico--redmine: "\e96f";
+$ico--zulip: "\e970";
+$ico--forum: "\e971";
+$ico--pirati: "\e90d";
+$ico--jitsi: "\e90f";
+$ico--open-source: "\e90e";
+$ico--donation-full: "\e96c";
+$ico--donation-outline: "\e96d";
+$ico--strategy: "\e932";
+$ico--pig: "\e928";
+$ico--thermometer: "\e90a";
+$ico--menu: "\e933";
+$ico--chevron-right: "\e923";
+$ico--chevron-left: "\e924";
+$ico--chevron-down: "\e925";
+$ico--chevron-up: "\e926";
+$ico--link-horizontal: "\e910";
+$ico--beer: "\e909";
+$ico--food: "\e968";
+$ico--dots-three-vertical: "\e940";
+$ico--dots-three-horizontal: "\e941";
+$ico--log-out: "\e942";
+$ico--envelope: "\e908";
+$ico--pin: "\e943";
+$ico--at: "\e905";
+$ico--glass: "\e967";
+$ico--checkmark: "\e965";
+$ico--info: "\e901";
+$ico--question: "\e904";
+$ico--warning: "\e93f";
+$ico--code: "\e94a";
+$ico--checkbox-unchecked: "\e94e";
+$ico--star-full: "\e94f";
+$ico--star-empty: "\e950";
+$ico--bookmark: "\e951";
+$ico--cog: "\e952";
+$ico--key: "\e953";
+$ico--zoom-in: "\e954";
+$ico--zoom-out: "\e955";
+$ico--shrink: "\e956";
+$ico--printer: "\e957";
+$ico--file-openoffice: "\e958";
+$ico--user: "\e959";
+$ico--file-excel: "\e95a";
+$ico--file-word: "\e95b";
+$ico--file-pdf: "\e95c";
+$ico--file-picture: "\e95d";
+$ico--file-blank: "\e95e";
+$ico--folder-upload: "\e95f";
+$ico--upload: "\e960";
+$ico--cloud-upload: "\e961";
+$ico--folder-download: "\e962";
+$ico--download: "\e963";
+$ico--cloud-download: "\e964";
+$ico--alarm: "\e900";
+$ico--calculator: "\e911";
+$ico--facebook-full: "\e913";
+$ico--feed: "\e927";
+$ico--library: "\e929";
+$ico--office: "\e92a";
+$ico--attachment: "\e92b";
+$ico--enlarge: "\e92c";
+$ico--eye-off: "\e92e";
+$ico--eye: "\e92f";
+$ico--share: "\e931";
+$ico--search: "\e939";
+$ico--pencil: "\e93c";
+$ico--lock-open: "\e947";
+$ico--lock: "\e948";
+$ico--equalizer: "\e949";
+$ico--switch: "\e94b";
+$ico--loop: "\e94c";
+$ico--refresh: "\e94d";
+$ico--bullhorn: "\e944";
+$ico--bin: "\e945";
+$ico--cross: "\e937";
+$ico--checkbox-checked: "\e938";
+$ico--globe: "\e93a";
+$ico--wikipedia: "\e93b";
+$ico--youtube: "\e936";
+$ico--users: "\e934";
+$ico--book: "\e935";
+$ico--bubbles: "\e930";
+$ico--map: "\e914";
+$ico--compass: "\e915";
+$ico--folder-open: "\e916";
+$ico--folder: "\e917";
+$ico--drawer: "\e918";
+$ico--stop: "\e919";
+$ico--github: "\e91a";
+$ico--clock: "\e91b";
+$ico--calendar: "\e91c";
+$ico--flickr: "\e91d";
+$ico--instagram: "\e91e";
+$ico--newspaper: "\e920";
+$ico--cart: "\e921";
+$ico--home: "\e922";
+$ico--link: "\e912";
+$ico--power: "\e90c";
+$ico--rocket: "\e946";
+$ico--location: "\e906";
+$ico--phone: "\e907";
+$ico--linkedin: "\e903";
+$ico--facebook: "\e902";
+$ico--envelop: "\e972";
+$ico--file-text2: "\e974";
+$ico--price-tag: "\e975";
+$ico--price-tags: "\e976";
+$ico--stats-dots: "\e99b";
+$ico--bed: "\e969";
+$ico--train: "\e96a";
+$ico--bus: "\e96b";
+$ico--wheelchair: "\e966";
+$ico--thumbs-down: "\e93d";
+$ico--thumbs-up: "\e93e";
+$ico--anchor: "\e92d";
+$ico--paw: "\e90b";
+