Sizing and styling of images from Obsidian to Astro

1
 img[alt*="size-"] {
2
  padding: .5em;
3
  &[alt*="size-xs"] {
4
    width: 50px;
5
    border: 2px dashed crimson;
6
    border-radius: 8px;
7
  }
8
  &[alt*="size-sm"] {
9
    width: 100px;
10
    border: 2px dashed hotpink;
11
    border-radius: 8px;
12
  }
13
  &[alt*="size-md"] {
14
    width: 250px;
15
    border: 2px dashed dodgerblue;
16
    border-radius: 8px;
17
  }
18
  &[alt*="size-lg"] {
19
    width: 500px;
20
    border: 2px dashed sienna;
21
    border-radius: 8px;
22
  }
23
}
24
p:has(img[alt*="-center"]) {
25
  width: 100%;
26
  display: flex;
27
  align-items: center;
28
  justify-content: center;
29
}
30
p:has(img[alt*="-end"]) {
31
  width: 100%;
32
  display: flex;
33
  align-items: center;
34
  justify-content: end;
35
}
36
.ctp-mocha img.favicon path,
37
.ctp-mocha svg.favicon path {
38
  fill: #89B4FA !important;
39
}
40
.ctp-latte svg.favicon path {
41
  fill: #1E66F5 !important;
42
  /* filter: saturate(2) !important; */
43
}