S - Images Adjustments.css

.theme-dark, .theme-light {
    /*Sizes*/
    --radius: 0px;
    --micro: 70px;
    --tiny: 100px;
    --small: 200px;
    --small-med: 300px;
    --med-small: 400px;
    --medium: 500px;
    --med-tall: 600px;
    --tall: 700px;
}
/*----Mobile----*/
@media (max-width: 500px) {
    
    .theme-dark, .theme-light {
        /*Mobile Sizes*/
        --radius: 0px;
        --micro: 70px;
        --tiny: 100px;
        --small: 150px;
        --small-med: 200px;
        --med-small: 250px;
        --medium: 300px;
        --med-tall: 450px;
        --tall: 500px;
    }
}

/*----<i alt=""></i>----*/
i { 
    display: block;
    font-style: unset;
    color: var(--text-normal);
    text-align: center;
    background-color: var(--background-secondary-alt);
    padding: 0 1em;
}

i[alt*="right"] {
    display: block;
    text-align: right;
    background-color: var(--background-secondary-alt);
    padding-right: .8em;
}


i[alt*="left"] {
    display: block;
    text-align: left;
    background-color: var(--background-secondary-alt);
    padding-left: .8em;
}

i[alt*="clear"] {
    clear: both;
}

i[alt*="nobg"] {
    background-color: transparent;
}



/*----Image Positions/Adjustments----*/
/*Captions*/
.img-cap .image-embed::after,
.image-embed[src*="#cap"]::after {
  content: attr(alt);
  color: var(--inactive);
  display: block;
  text-align: center;
}

/* Lithou's Img-Grid CSS */
.img-grid span.image-embed[alt*="."],
span.image-embed[src*=grid],
span.image-embed[alt*=grid],
img[alt*=grid] {
  display: table-cell;
  vertical-align: middle;
  padding: 3px;
}

.img-grid img[alt*="."],
.image-embed[alt*=grid],
img[alt*=grid],
.image-embed[src*="#grid"] {
  max-height: 30vh;
}

.img-grid img[alt*="."]:hover,
.image-embed[src*="#grid"]:hover,
.image-embed[src*="#grid"]:hover,
img[alt*=grid]:hover {
  transform: scale(1.5);
}

/*Invert Colors*/
.theme-dark img[alt*=invertb],
.theme-dark .image-embed[src*="#invertb"] {
  filter: invert(1) hue-rotate(180deg);
}

.theme-light img[alt*=invertw],
.theme-light .image-embed[src*="#invertw"] {
  filter: invert(1) hue-rotate(180deg);
}

.theme-dark img[alt*=invertbc],
.theme-dark .image-embed[src*="#invertbc"] {
  filter: invert(1) hue-rotate(180deg) contrast(1.5);
}

.theme-light img[alt*=invertwc],
.theme-light .image-embed[src*="#invertwc"] {
  filter: invert(1) hue-rotate(180deg) contrast(1.45);
}

/*Fix Float Issues*/
img[alt*=clear],
.image-embed[src*="#clear"] {
  clear: both;
}

img[alt*=unclr],
.image-embed[src*="#unclr"] {
  clear: none !important;
}

/*Round Image*/
img[alt*=circle] {
  border-radius: 50%;
}

/*Center Image*/
img[alt*=ctr],
.image-embed[src*="#ctr"],
.image-embed[src*="#center"] .image-embed[alt*=center],
.imgctr img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/*--Simplified Version--*/
/*Image Locations*/
/*Left & Right*/
.view-content > :not(.is-live-preview) .image-embed[alt*=left], .view-content > :not(.is-live-preview) .image-embed[src*="#left"], .view-content > :not(.is-live-preview) .image-embed[alt*=locl], .view-content > :not(.is-live-preview) .image-embed[src*="#locl"] img {
  float: left;
  margin-right: 2%;
  margin-top: 0px;
  margin-bottom: 0px;
}
.view-content > :not(.is-live-preview) .image-embed[alt*=right], .view-content > :not(.is-live-preview) .image-embed[src*="#right"], .view-content > :not(.is-live-preview) .image-embed[alt*=locr], .view-content > :not(.is-live-preview) .image-embed[src*="#locr"] img {
  float: right;
  margin-left: 2%;
  margin-bottom: 0px;
}


/*Image Shapes*/
/*Banners*/
img[alt*="banner"],
.image-embed[alt*="banner"] img,
.image-embed[src*="#banner"] {
    display: block;
    object-fit: cover;
    height: var(--small);
    width: 100%;
    margin-bottom: 0px;
    clear: both;
}
img[alt*="banner+small"],
.image-embed[alt*="banner+small"] img,
.image-embed[src*="#banner+small"] {
    display: block;
    object-fit: cover;
    height: var(--tiny);
    width: 100%;
    margin-bottom: 0px;
    clear: both;
}
img[alt*="banner+tall"],
.image-embed[alt*="banner+tall"] img,
.image-embed[src*="#banner+tall"] {
    display: block;
    object-fit: cover;
    height: var(--medium);
    width: 100%;
    margin-bottom: 0px;
    clear: both;
}



/*Portait*/
img[alt*="portrait"],
.image-embed[alt*="portrait"] img,
.image-embed[src*="#portrait"] {
    object-fit: cover;
    height: var(--small-med);
    width: 40%;
}

img[alt*="portrait+small"],
.image-embed[alt*="portrait+small"] img,
.image-embed[src*="#portrait+small"] {
    height: var(--small);
    width: 20%;
    object-fit: cover;
}

img[alt*="portrait+tall"],
.image-embed[alt*="portrait+tall"] img,
.image-embed[src*="#portrait+tall"] {
    height: 500px;
    width: 50%;
    object-fit: cover;
}

/*Profile*/
img[alt*="profile"],
.image-embed[alt*="profile"] img,
.image-embed[src*="#profile"] {
    object-fit: cover;
    height: var(--tiny);
    width: var(--tiny);
}

img[alt*="profile+medium"],
.image-embed[alt*="profile+medium"] img,
.image-embed[src*="#profile+medium"] {
    object-fit: cover;
    height: var(--small);
    width: var(--small);
}
img[alt*="profile+tall"],
.image-embed[alt*="profile+tall"] img,
.image-embed[src*="#profile+tall"] {
    object-fit: cover;
    height: var(--medium);
    width: var(--medium);
}

/*--Customizable Version--*/
/*-Image Sizing-*/

/*Fit image within bounds WITHOUT stretching*/
img[alt*="cover"], 
.image-embed[src*="#cover"], 
span.image-embed[src*="#cover"] img,
img[alt*="cvr"],
.image-embed[src*="#cvr"], 
span.image-embed[src*="#cvr"] img {
    object-fit: cover;
}

/*Height*/
img[alt*="hmicro"],
.image-embed[src*="#hmicro"] img {
    height: var(--micro);
}
img[alt*="htiny"],
.image-embed[src*="#htiny"] img {
    height: var(--tiny);
}
img[alt*="hsmall"],
.image-embed[src*="#hsmall"] img {
    height: var(--small);
}
img[alt*="hs-med"],
.image-embed[src*="#hs-med"] img {
    height: var(--small-med);
}
img[alt*="hm-sm"],
.image-embed[src*="#hs-sm"] img {
    height: var(--med-small);
}
img[alt*="hmed"],
.image-embed[src*="#hmed"] img {
    height: var(--medium);
}
img[alt*="hm-tl"],
.image-embed[src*="#hm-tl"],
.image-embed[src*="#hm-tl"] img {
    height: var(--med-tall);
}
img[alt*="htall"],
.image-embed[src*="#htall"] img {
    height: var(--tall);
}

/*Width*/
img[alt*="wmicro"],
.image-embed[src*="#wmicro"] img,
.image-embed[alt*="#wmicro"]::after {
    width: var(--micro); 
}

img[alt*="wtiny"],
.image-embed[src*="#wtiny"] img,
.image-embed[src*="#wtiny"]::after { 
    width: var(--tiny); 
}

img[alt*="wsmall"],
.image-embed[src*="#wsmall"] img,
.image-embed[src*="#wsmall"]::after {
    width: var(--small);
}

img[alt*="ws-med"],
.image-embed[src*="#ws-med"] img,
.image-embed[src*="#ws-med"]::after {
    width: var(--small-med); 
}

img[alt*="wm-sm"],
.image-embed[src*="#wm-sm"] img,
.image-embed[src*="#wm-sm"]::after {
    width: var(--med-small); 
}

img[alt*="wmed"],
.image-embed[src*="#wmed"] img,
.image-embed[src*="#wmed"]::after {
    width: var(--medium); 
}

img[alt*="wm-tl"],
.image-embed[src*="#wm-tl"] img,
.image-embed[src*="#wm-tl"]::after {
    width: var(--med-tall); 
}

img[alt*="wtall"],
.image-embed[src*="#wtall"] img,
.image-embed[src*="#wtall"]::after {
    width: var(--tall); 
}


/*--Image Position--*/
img[alt*="p+"],
.image-embed[src*="#p+"] img { object-fit: cover; }

/*Inner Image*/
img[alt*="p+c"],
.image-embed[src*="#p+c"] img{ object-position: center; }
img[alt*="p+t"],
.image-embed[src*="#p+t"] img{ object-position: top; }
img[alt*="p+b"],
.image-embed[src*="#p+b"] img{ object-position: bottom; }
img[alt*="p+l"],
.image-embed[src*="#p+l"] img{ object-position: left; }
img[alt*="p+r"],
.image-embed[src*="#p+r"] img{ object-position: right; }


img[alt*="p+cl"],
.image-embed[src*="#p+cl"] img      {object-position: 15%; }
img[alt*="p+ccl"],
.image-embed[src*="#p+ccl"] img     {object-position: 25%; }
img[alt*="p+cr"],
.image-embed[src*="#p+cr"] img      {object-position: 60%; }
img[alt*="p+ccr"],
.image-embed[src*="#p+ccr"] img     {object-position: 75%; }

img[alt*="p+tc"],
.image-embed[src*="#p+tc"] img      {object-position: 50% 10%; }
img[alt*="p+tcc"],
.image-embed[src*="#p+tcc"] img     {object-position: 50% 20%; }
img[alt*="p+cct"],
.image-embed[src*="#p+cct"] img     {object-position: 50% 30%; }
img[alt*="p+ct"],
.image-embed[src*="#p+ct"] img      {object-position: 50% 40%; }

img[alt*="p+cb"],
.image-embed[src*="#p+cb"] img      {object-position: 50% 60%; }
img[alt*="p+ccb"],
.image-embed[src*="#p+ccb"] img     {object-position: 50% 70%; }
img[alt*="p+bc"],
.image-embed[src*="#p+bc"] img      {object-position: 50% 80%; }
img[alt*="p+bcc"],
.image-embed[src*="#p+bcc"] img     {object-position: 50% 90%; }


/*--Image Shapes--*/
/*Banners*/
img[alt*="sban"],
.internal-embed[src*="#sban"] img {
    object-fit: cover;
    width: 100%;
}

/*Profile*/
/*Rounded Image*/
img[alt*="sprf"]{
    object-fit: cover;
    border-radius: 100%;
}