Template:Image Banner/styles.css

/* 
css variables provided by the template:
* --banner--font-size-mult - multiplier for the font size of banner headings
* --banner--img-offset-x - horizontal offset for the image
* --banner--img-offset-y - vertical offset for the image
* --banner--img-height - height of the image
* --banner--header-wrapper-backdrop-blur - backdrop blur for the header wrapper
*/

.img-banner {
    position: relative;
	width: fit-content;
	max-width: 100%;

    display: grid;
    grid-template: "container";
    align-items: center;

    margin-top: 1.5em;
    margin-bottom: 1em;

    border-radius: .25rem;
    outline: 1px solid var(--action-color--slightly-lighter);

    overflow: hidden;
}

.img-banner > * {
    grid-area: container;
}

.img-banner img {
    max-height: var(--banner--img-height);
    object-fit: none;
    object-position: var(--banner--img-offset-x) var(--banner--img-offset-y);
}

/* banner → header */
.img-banner h2,
.img-banner h3,
.img-banner h4,
.img-banner h5,
.img-banner h6 {
    /* remove default margin, since it will interfere with inner positioning */
    margin: 0;
    /* same as above, but for padding */
    padding: 0;

    /* remove the border styling */
    background-image: none;

    /* make it more clear */
    text-shadow: 0 0 5px black;
}

/* banner → header wrapper */ 
.img-banner > .img-banner-header-wrapper {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: fit-content;
    height: 100%;
    
    padding: .5rem;

    border-top-right-radius: .15rem;
    border-bottom-right-radius: .15rem;
}