.obsidian/snippets/CSS.Banners.css
 /*
MIT License

Copyright (c) 2024 HandaArchitect

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

=============================================================================

Obsidian Banner Snippet
https://github.com/HandaArchitect/obsidian-banner-snippet

Message:
Please always add the banner image and banner icon to the top of the content as Obsidian may remove the loaded content if the images are far too down the note.

v1.3.2
- Fixed banner-icon not positioning correctly when banner adjusts height for smaller screen size.
- Minor code changes to prevent banner from disappearing.
*/

/* === Banners === */

body:has(*.banner) {
    --banner-height: 200px;

    --banner-title-color: #000000;
    --banner-title-background-color: rgba(255, 255, 255, 0.7);
    --banner-title-box-shadow: 0 0 7px rgba(0, 0, 0, 0.1);
    --banner-title-padding: 0.2em 0.4em;
    --banner-title-top: 70;
    --banner-title-left: 50;
    --banner-title-max-width: 500px;
    --banner-title-border-radius: 10px;

    --banner-icon-size: 40px;
    --banner-icon-top: 100;
    --banner-icon-left: 5;
    --banner-icon-border-radius: 25%;

    --banner-gradient-mask-webkit: -webkit-linear-gradient(bottom, transparent, rgba(0, 0, 0, 0.3) 10%, black 40%);
    --banner-gradient-mask: linear-gradient(to top, transparent, rgba(0, 0, 0, 0.3) 10%, black 40%);
}

/* --- Margin above inline title and frontmatter --- */

/* Markdown Preview View */
.view-content > .banner.banner.is-live-preview > .cm-editor > .cm-scroller > .cm-sizer:has(div[alt="banner"] img[alt="banner"]),

/* Reading View */
.view-content > .markdown-reading-view > .banner.markdown-preview-view > .markdown-preview-section > .markdown-preview-pusher,

/* Embedded Note */
.markdown-embed > .markdown-embed-content > .banner.markdown-preview-view > .markdown-preview-section > .markdown-preview-pusher {
    padding-top: calc( var(--banner-height) + var(--banner-icon-size) / 1.5 );
}

/* --- Banner Image --- */

/* Fixes text selection issue. */
.banner.is-live-preview .image-embed:has(img[alt="banner"]),
.banner.markdown-preview-view span[alt="banner"] {
    display: contents;
}

/* Fixes banner image and banner-icon not positioning to the top in certain themes. */

.view-content > .markdown-reading-view > .markdown-preview-view > .markdown-preview-section > div:has(p > span[alt="banner"] > img[alt="banner"]),
.view-content > .markdown-reading-view > .markdown-preview-view > .markdown-preview-section > div:has([data-callout="banner-icon"].callout),
.view-content > .markdown-reading-view > .markdown-preview-view > .markdown-preview-section > div:has(p > span[alt="banner-icon"] > img[alt="banner-icon"]) {
    position: static;
}

/* Positions banner image fix to the top. */
/* Markdown Preview View */
.banner.is-live-preview .image-embed img[alt="banner"],
/* Reading View */
.markdown-reading-view .banner.markdown-preview-view img[alt="banner"]
 {
    box-shadow: none;
    position: absolute;
    top: 0;
    left: 0;
	height: var(--banner-height);
	max-width: 100% !important; /* Fix for certain themes that limit max-width */
	width: 100%;
    object-fit: cover;
    object-position: 50% 50%;
}

/* --- Banner Fade --- */

.banner.banner-fade.markdown-preview-view img[alt='banner']:first-child,
.banner.banner-fade.is-live-preview img[alt='banner']:first-child {
    -webkit-mask-image: var(--banner-gradient-mask-webkit) !important;
    mask-image: var(--banner-gradient-mask) !important;
}

/* --- Banner Inline Title --- */

/* Inline title enabled on max screen size only. */
@media screen and (min-width: 1000px) {

    /* Adapting Banner Inline Title by Min-Width */
    .banner.banner-inline-title.markdown-preview-view .inline-title,
    .banner.banner-inline-title.is-live-preview .inline-title {
        background-color: var(--banner-title-background-color);
        border-radius: var(--banner-title-border-radius);
        --inline-title-color: var(--banner-title-color);
        padding: var(--banner-title-padding);
        position: absolute;
        top: calc( var(--banner-title-top) / 100 * var(--banner-height));
        left: calc( ( var(--banner-title-left) ) / 100 * ( 100% - var(--banner-title-max-width) / 1 ) );
        z-index: 1;
        max-width: var(--banner-title-max-width);
		width: auto !important;
        text-wrap: nowrap;
        overflow-x: hidden;
    }

    .banner.banner-inline-title.markdown-preview-view .inline-title:hover,
    .banner.banner-inline-title.is-live-preview .inline-title:hover,
    .banner.banner-inline-title.markdown-preview-view .inline-title:focus,
    .banner.banner-inline-title.is-live-preview .inline-title:focus {
        overflow-x: auto;
    }

    /* --- Banner Title Box Shadow --- */

    .banner-title-box-shadow .banner.banner-inline-title.is-live-preview .inline-title,
    .banner-title-box-shadow .banner.banner-inline-title.markdown-preview-view .inline-title,
    .banner-title-box-shadow .banner.banner-inline-title:not(.banner-inline-title) [data-callout="banner-title"].callout:first-child .callout-title-inner {
        box-shadow: var(--banner-title-box-shadow);
    }

}


/* --- Banner Callout Title: EXPERIMENTAL --- */

/* .banner:not(.banner-inline-title) .cm-callout:has([data-callout="banner-title"].callout:first-child),
.banner:not(.banner-inline-title) [data-callout="banner-title"].callout:first-child,
.banner:not(.banner-inline-title) [data-callout="banner-title"].callout:first-child .callout-title {
    display: contents;
}

.banner:not(.banner-inline-title) [data-callout="banner-title"].callout:first-child .callout-icon {
    display: none;
}

.banner:not(.banner-inline-title) [data-callout="banner-title"].callout:first-child .callout-title-inner {
    background-color: var(--banner-title-background-color);
    border-radius: 10px;
    margin: 0;
    padding: 0;
    position: absolute;
    top: var(--banner-title-top);
    left: var(--banner-title-left);
    padding: var(--banner-title-padding);
    color: var(--banner-title-color);
    font-weight: var(--inline-title-weight);
    font-size: var(--inline-title-size);
    line-height: var(--inline-title-line-height);
    font-style: var(--inline-title-style);
    font-variant: var(--inline-title-variant);
    font-family: var(--inline-title-font);
    letter-spacing: -0.015em;
    max-width: var(--banner-title-max-width);
} */

/* --- Banner Icon --- */

.banner div[data-callout="banner-icon"].callout {
    mix-blend-mode: normal;
	--callout-color: none !important;
}

/* Banner Icon: markdown-reading-view */

.banner.markdown-preview-view [data-callout="banner-icon"].callout {
    display: contents;
}

.banner.markdown-preview-view [data-callout="banner-icon"].callout .callout-icon {
    display: none;
}

.banner.markdown-preview-view [data-callout="banner-icon"].callout .callout-title-inner {
    font-size: var(--banner-icon-size) !important;
    position: absolute;
    top: calc( var(--banner-icon-top) / 100 * ( var(--banner-height) - var(--banner-icon-size) * 0.7 ) ) !important;
    left: calc( var(--banner-icon-left) / 100 * ( 100% - var(--banner-icon-size) * 1.5 ) );
}


/* Banner Icon: is-live-preview */

.banner.is-live-preview .cm-callout:has([data-callout="banner-icon"].callout) {
    display: contents;
}

.banner.is-live-preview .markdown-rendered:has([data-callout="banner-icon"].callout):not(:has(.internal-embed)) {
    position: absolute;
    top: calc( var(--banner-icon-top) / 100 * ( var(--banner-height) - var(--banner-icon-size) * 0.7 ) );
    left: calc( var(--banner-icon-left) / 100 * ( 100% - var(--banner-icon-size) * 1.5 ) );
}

.banner.is-live-preview [data-callout="banner-icon"].callout {
    background: none;
    padding: 0;
}

.banner.is-live-preview [data-callout="banner-icon"].callout .callout-title {
    padding: 0;
}

.banner.is-live-preview [data-callout="banner-icon"].callout .callout-icon {
    display: none;
}

.banner.is-live-preview [data-callout="banner-icon"].callout .callout-title-inner {
    font-size: var(--banner-icon-size);
}

/* --- Banner Image Icons --- */

.banner.is-live-preview .image-embed:has(img[alt="banner-icon"]:first-of-type),
.banner.markdown-preview-view span[alt="banner-icon"]:first-of-type,
.banner.is-live-preview .HyperMD-quote:has(img[alt="banner-icon"]:first-of-type) {
    display: contents;
	z-index: 1 !important;
}

.banner.is-live-preview .image-embed img[alt="banner-icon"]:first-of-type,
.banner.markdown-preview-view img[alt="banner-icon"]:first-of-type {
    display: block;
    position: absolute;
    top: calc( var(--banner-icon-top) / 100 * ( var(--banner-height) - var(--banner-icon-size) * 0.5 ) );
    left: calc( var(--banner-icon-left) / 100 * ( 100% - var(--banner-icon-size) * 1.5 ) );
    object-fit: cover;
    height: var(--banner-height);
    margin: 0;
    height: var(--banner-icon-size);
    width: var(--banner-icon-size);
    border-radius: var(--banner-icon-border-radius);
}

/* Small Width Sreen - reduced by 30% */

@media screen and (max-width: 800px) {

    /* Positions banner image fix to the top. */
    /* Markdown Preview View */
    .banner.is-live-preview .image-embed img[alt="banner"],
    /* Reading View */
    .markdown-reading-view .banner.markdown-preview-view img[alt="banner"] {
        height: calc(var(--banner-height) * 0.8);
    }


    /* Banner Icon */
    /* Markdown Preview View */
    .banner.markdown-preview-view [data-callout="banner-icon"].callout .callout-title-inner,
	.banner.is-live-preview > .cm-editor > .cm-scroller > .cm-contentContainer > .cm-content > .cm-callout > .markdown-rendered:has([data-callout="banner-icon"].callout) {
		top: calc( var(--banner-icon-top) / 100 * ( var(--banner-height) * 0.8 - var(--banner-icon-size) * 0.7 ) ) !important;
	}

    .banner.is-live-preview .image-embed img[alt="banner-icon"]:first-child,
    .banner.markdown-preview-view img[alt="banner-icon"]:first-child {
        top: calc( var(--banner-icon-top) / 100 * ( var(--banner-height) * 0.8 - var(--banner-icon-size) * 0.5 ) );
    }
	
	/* .banner.is-live-preview .image-embed img[alt="banner"],
	.banner.markdown-preview-view img[alt="banner"] {
		height: calc(var(--banner-height) * 0.8);
	} */

    /* --- Margin above inline title and frontmatter --- */
	
    /* Markdown Preview View */
    .view-content > .banner.banner.is-live-preview > .cm-editor > .cm-scroller > .cm-sizer:has(div[alt="banner"] img[alt="banner"]),

    /* Reading View */
    .view-content > .markdown-reading-view > .banner.markdown-preview-view > .markdown-preview-section > .markdown-preview-pusher {
        padding-top: calc( var(--banner-height) * 0.7 + var(--banner-icon-size) / 1.5 );
    }
	
}

/*

Removed settings.

    -
        id: banner-title-box-shadow
        title: Box Shadow
        type: class-toggle
        default: true

*/

/* --- Banner Position Y --- */

.banner.is-live-preview.banner-y0 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y0 img[alt="banner"]{object-position:50% 0!important}.banner.is-live-preview.banner-y1 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y1 img[alt="banner"]{object-position:50% 1%!important}.banner.is-live-preview.banner-y2 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y2 img[alt="banner"]{object-position:50% 2%!important}.banner.is-live-preview.banner-y3 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y3 img[alt="banner"]{object-position:50% 3%!important}.banner.is-live-preview.banner-y4 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y4 img[alt="banner"]{object-position:50% 4%!important}.banner.is-live-preview.banner-y5 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y5 img[alt="banner"]{object-position:50% 5%!important}.banner.is-live-preview.banner-y6 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y6 img[alt="banner"]{object-position:50% 6%!important}.banner.is-live-preview.banner-y7 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y7 img[alt="banner"]{object-position:50% 7%!important}.banner.is-live-preview.banner-y8 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y8 img[alt="banner"]{object-position:50% 8%!important}.banner.is-live-preview.banner-y9 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y9 img[alt="banner"]{object-position:50% 9%!important}.banner.is-live-preview.banner-y10 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y10 img[alt="banner"]{object-position:50% 10%!important}.banner.is-live-preview.banner-y11 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y11 img[alt="banner"]{object-position:50% 11%!important}.banner.is-live-preview.banner-y12 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y12 img[alt="banner"]{object-position:50% 12%!important}.banner.is-live-preview.banner-y13 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y13 img[alt="banner"]{object-position:50% 13%!important}.banner.is-live-preview.banner-y14 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y14 img[alt="banner"]{object-position:50% 14%!important}.banner.is-live-preview.banner-y15 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y15 img[alt="banner"]{object-position:50% 15%!important}.banner.is-live-preview.banner-y16 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y16 img[alt="banner"]{object-position:50% 16%!important}.banner.is-live-preview.banner-y17 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y17 img[alt="banner"]{object-position:50% 17%!important}.banner.is-live-preview.banner-y18 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y18 img[alt="banner"]{object-position:50% 18%!important}.banner.is-live-preview.banner-y19 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y19 img[alt="banner"]{object-position:50% 19%!important}.banner.is-live-preview.banner-y20 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y20 img[alt="banner"]{object-position:50% 20%!important}.banner.is-live-preview.banner-y21 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y21 img[alt="banner"]{object-position:50% 21%!important}.banner.is-live-preview.banner-y22 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y22 img[alt="banner"]{object-position:50% 22%!important}.banner.is-live-preview.banner-y23 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y23 img[alt="banner"]{object-position:50% 23%!important}.banner.is-live-preview.banner-y24 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y24 img[alt="banner"]{object-position:50% 24%!important}.banner.is-live-preview.banner-y25 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y25 img[alt="banner"]{object-position:50% 25%!important}.banner.is-live-preview.banner-y26 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y26 img[alt="banner"]{object-position:50% 26%!important}.banner.is-live-preview.banner-y27 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y27 img[alt="banner"]{object-position:50% 27%!important}.banner.is-live-preview.banner-y28 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y28 img[alt="banner"]{object-position:50% 28%!important}.banner.is-live-preview.banner-y29 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y29 img[alt="banner"]{object-position:50% 29%!important}.banner.is-live-preview.banner-y30 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y30 img[alt="banner"]{object-position:50% 30%!important}.banner.is-live-preview.banner-y31 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y31 img[alt="banner"]{object-position:50% 31%!important}.banner.is-live-preview.banner-y32 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y32 img[alt="banner"]{object-position:50% 32%!important}.banner.is-live-preview.banner-y33 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y33 img[alt="banner"]{object-position:50% 33%!important}.banner.is-live-preview.banner-y34 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y34 img[alt="banner"]{object-position:50% 34%!important}.banner.is-live-preview.banner-y35 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y35 img[alt="banner"]{object-position:50% 35%!important}.banner.is-live-preview.banner-y36 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y36 img[alt="banner"]{object-position:50% 36%!important}.banner.is-live-preview.banner-y37 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y37 img[alt="banner"]{object-position:50% 37%!important}.banner.is-live-preview.banner-y38 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y38 img[alt="banner"]{object-position:50% 38%!important}.banner.is-live-preview.banner-y39 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y39 img[alt="banner"]{object-position:50% 39%!important}.banner.is-live-preview.banner-y40 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y40 img[alt="banner"]{object-position:50% 40%!important}.banner.is-live-preview.banner-y41 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y41 img[alt="banner"]{object-position:50% 41%!important}.banner.is-live-preview.banner-y42 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y42 img[alt="banner"]{object-position:50% 42%!important}.banner.is-live-preview.banner-y43 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y43 img[alt="banner"]{object-position:50% 43%!important}.banner.is-live-preview.banner-y44 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y44 img[alt="banner"]{object-position:50% 44%!important}.banner.is-live-preview.banner-y45 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y45 img[alt="banner"]{object-position:50% 45%!important}.banner.is-live-preview.banner-y46 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y46 img[alt="banner"]{object-position:50% 46%!important}.banner.is-live-preview.banner-y47 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y47 img[alt="banner"]{object-position:50% 47%!important}.banner.is-live-preview.banner-y48 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y48 img[alt="banner"]{object-position:50% 48%!important}.banner.is-live-preview.banner-y49 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y49 img[alt="banner"]{object-position:50% 49%!important}.banner.is-live-preview.banner-y50 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y50 img[alt="banner"]{object-position:50% 50%!important}.banner.is-live-preview.banner-y51 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y51 img[alt="banner"]{object-position:50% 51%!important}.banner.is-live-preview.banner-y52 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y52 img[alt="banner"]{object-position:50% 52%!important}.banner.is-live-preview.banner-y53 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y53 img[alt="banner"]{object-position:50% 53%!important}.banner.is-live-preview.banner-y54 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y54 img[alt="banner"]{object-position:50% 54%!important}.banner.is-live-preview.banner-y55 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y55 img[alt="banner"]{object-position:50% 55%!important}.banner.is-live-preview.banner-y56 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y56 img[alt="banner"]{object-position:50% 56%!important}.banner.is-live-preview.banner-y57 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y57 img[alt="banner"]{object-position:50% 57%!important}.banner.is-live-preview.banner-y58 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y58 img[alt="banner"]{object-position:50% 58%!important}.banner.is-live-preview.banner-y59 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y59 img[alt="banner"]{object-position:50% 59%!important}.banner.is-live-preview.banner-y60 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y60 img[alt="banner"]{object-position:50% 60%!important}.banner.is-live-preview.banner-y61 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y61 img[alt="banner"]{object-position:50% 61%!important}.banner.is-live-preview.banner-y62 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y62 img[alt="banner"]{object-position:50% 62%!important}.banner.is-live-preview.banner-y63 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y63 img[alt="banner"]{object-position:50% 63%!important}.banner.is-live-preview.banner-y64 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y64 img[alt="banner"]{object-position:50% 64%!important}.banner.is-live-preview.banner-y65 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y65 img[alt="banner"]{object-position:50% 65%!important}.banner.is-live-preview.banner-y66 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y66 img[alt="banner"]{object-position:50% 66%!important}.banner.is-live-preview.banner-y67 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y67 img[alt="banner"]{object-position:50% 67%!important}.banner.is-live-preview.banner-y68 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y68 img[alt="banner"]{object-position:50% 68%!important}.banner.is-live-preview.banner-y69 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y69 img[alt="banner"]{object-position:50% 69%!important}.banner.is-live-preview.banner-y70 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y70 img[alt="banner"]{object-position:50% 70%!important}.banner.is-live-preview.banner-y71 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y71 img[alt="banner"]{object-position:50% 71%!important}.banner.is-live-preview.banner-y72 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y72 img[alt="banner"]{object-position:50% 72%!important}.banner.is-live-preview.banner-y73 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y73 img[alt="banner"]{object-position:50% 73%!important}.banner.is-live-preview.banner-y74 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y74 img[alt="banner"]{object-position:50% 74%!important}.banner.is-live-preview.banner-y75 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y75 img[alt="banner"]{object-position:50% 75%!important}.banner.is-live-preview.banner-y76 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y76 img[alt="banner"]{object-position:50% 76%!important}.banner.is-live-preview.banner-y77 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y77 img[alt="banner"]{object-position:50% 77%!important}.banner.is-live-preview.banner-y78 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y78 img[alt="banner"]{object-position:50% 78%!important}.banner.is-live-preview.banner-y79 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y79 img[alt="banner"]{object-position:50% 79%!important}.banner.is-live-preview.banner-y80 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y80 img[alt="banner"]{object-position:50% 80%!important}.banner.is-live-preview.banner-y81 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y81 img[alt="banner"]{object-position:50% 81%!important}.banner.is-live-preview.banner-y82 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y82 img[alt="banner"]{object-position:50% 82%!important}.banner.is-live-preview.banner-y83 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y83 img[alt="banner"]{object-position:50% 83%!important}.banner.is-live-preview.banner-y84 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y84 img[alt="banner"]{object-position:50% 84%!important}.banner.is-live-preview.banner-y85 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y85 img[alt="banner"]{object-position:50% 85%!important}.banner.is-live-preview.banner-y86 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y86 img[alt="banner"]{object-position:50% 86%!important}.banner.is-live-preview.banner-y87 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y87 img[alt="banner"]{object-position:50% 87%!important}.banner.is-live-preview.banner-y88 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y88 img[alt="banner"]{object-position:50% 88%!important}.banner.is-live-preview.banner-y89 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y89 img[alt="banner"]{object-position:50% 89%!important}.banner.is-live-preview.banner-y90 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y90 img[alt="banner"]{object-position:50% 90%!important}.banner.is-live-preview.banner-y91 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y91 img[alt="banner"]{object-position:50% 91%!important}.banner.is-live-preview.banner-y92 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y92 img[alt="banner"]{object-position:50% 92%!important}.banner.is-live-preview.banner-y93 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y93 img[alt="banner"]{object-position:50% 93%!important}.banner.is-live-preview.banner-y94 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y94 img[alt="banner"]{object-position:50% 94%!important}.banner.is-live-preview.banner-y95 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y95 img[alt="banner"]{object-position:50% 95%!important}.banner.is-live-preview.banner-y96 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y96 img[alt="banner"]{object-position:50% 96%!important}.banner.is-live-preview.banner-y97 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y97 img[alt="banner"]{object-position:50% 97%!important}.banner.is-live-preview.banner-y98 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y98 img[alt="banner"]{object-position:50% 98%!important}.banner.is-live-preview.banner-y99 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y99 img[alt="banner"]{object-position:50% 99%!important}.banner.is-live-preview.banner-y100 .image-embed img[alt="banner"],.banner.markdown-preview-view.banner-y100 img[alt="banner"]{object-position:50% 100%!important}

/* @settings

name: Banner Settings
id: css-banner-settings
description: Change the banner settings.
settings:
    - 
        id: banner-height
        title: Banner Height
        type: variable-number
        default: 200
        format: px
    -
        id: banner-title-settings
        title: Banner Title
        type: heading
        level: 1
        collapsed: true
    -
        id: banner-title-info
        title: Note
        description: "*The horizontal position setting of the banner title takes into account the title's max width. This means, when the horizontal position is set to 100, the value is also reduced by the title's max width to prevent the title going out of the page.*"
        type: info-text
        markdown: true;
    -
        id: banner-title-color
        title: Color
        type: variable-color
        opacity: true
        format: hex
        default: #000000
    -
        id: banner-title-background-color
        title: Background Color
        type: variable-color
        opacity: true
        format: rgb
        default: rgba(255, 255, 255, 0.7)
    -
        id: banner-title-max-width
        title: Max Width
        type: variable-number
        default: 500
        format: px
    -
        id: banner-title-top
        title: Vertical Position
        type: variable-number-slider
        min: 0
        max: 100
        default: 70
        format: ""
    -
        id: banner-title-left
        title: Horizontal Position
        type: variable-number-slider
        min: 0
        max: 100
        default: 50
        format: ""
    -
        id: banner-icon-settings
        title: Banner Icon
        type: heading
        level: 1
        collapsed: true
    -
        id: banner-icon-border-radius
        title: Border Radius
        description: Border radius only applies to image border icons.
        type: variable-select
        default: 25%
        options:
            -
                label: Square
                value: 0%
            -
                label: Rounded
                value: 25%
            -
                label: Circle
                value: 100%
    -
        id: banner-icon-size
        title: Icon Size
        type: variable-number-slider
        default: 40
        min: 40
        max: 80
        format: px
    -
        id: banner-icon-top
        title: Vertical Position
        type: variable-number-slider
        min: 0
        max: 100
        default: 100
        format: ""
    -
        id: banner-icon-left
        title: Horizontal Position
        type: variable-number-slider
        min: 0
        max: 100
        default: 5
        format: ""
*/