Define Maximum Width of Images on Desktop and Mobile

<picture>
    <source srcset="smaller_landscape.jpg" media="(max-width: 40em) and (orientation: landscape)">
    <source srcset="smaller_portrait.jpg" media="(max-width: 40em) and (orientation: portrait)">
    <source srcset="default_landscape.jpg" media="(min-width: 40em) and (orientation: landscape)">
    <source srcset="default_portrait.jpg" media="(min-width: 40em) and (orientation: portrait)">
    <img srcset="default_landscape.jpg" alt="My default image">
</picture>

.outer {
  position: relative;
  &:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: (9 / 16) * 100%;
  }
  > .inner {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
}
  

//If you wish to apply this on both desktop and mobile
#blockID {
  max-width:150px;
  margin:auto;
}

//If you wish to apply this on mobile only
@media screen and (max-width:767px) {

#blockID {
  max-width:150px;
  margin:auto;
}

}

# extract images from pdf file
import fitz
doc = fitz.open("file.pdf")
for i in range(len(doc)):
    for img in doc.getPageImageList(i):
        xref = img[0]
        pix = fitz.Pixmap(doc, xref)
        if pix.n < 5:       # this is GRAY or RGB
            pix.writePNG("p%s-%s.png" % (i, xref))
        else:               # CMYK: convert to RGB first
            pix1 = fitz.Pixmap(fitz.csRGB, pix)
            pix1.writePNG("p%s-%s.png" % (i, xref))
            pix1 = None
        pix = None

# STEP 1
# import libraries
import fitz
import io
from PIL import Image
  
# STEP 2
# file path you want to extract images from
file = "/content/pdf_file.pdf"
  
# open the file
pdf_file = fitz.open(file)
  
# STEP 3
# iterate over PDF pages
for page_index in range(len(pdf_file)):
    
    # get the page itself
    page = pdf_file[page_index]
    image_list = page.getImageList()
      
    # printing number of images found in this page
    if image_list:
        print(f"[+] Found a total of {len(image_list)} images in page {page_index}")
    else:
        print("[!] No images found on page", page_index)
    for image_index, img in enumerate(page.getImageList(), start=1):
        
        # get the XREF of the image
        xref = img[0]
          
        # extract the image bytes
        base_image = pdf_file.extractImage(xref)
        image_bytes = base_image["image"]
          
        # get the image extension
        image_ext = base_image["ext"]

/// Remove the unit of a length
/// @param {Number} $number - Number to remove unit from
/// @return {Number} - Unitless number
@function strip-unit($number) {
  @if type-of($number) == 'number' and not unitless($number) {
    @return $number / ($number * 0 + 1);
  }

  @return $number;
}

.iframe-container {
      // overflow: hidden;
      // /* 16:9 aspect ratio */
      // padding-top: 56.25%;
      // position: relative;
      width: 100%;
      padding-top: 100%;
      position: relative;
      iframe {
         // border: 0;
         // height: 100%;
         // left: 0;
         // position: absolute;
         // top: 0;
         // width: 100%;
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
      }
    }

html,

body {

  width: 0%;

  height: 100%;

  display: flex;

}

​

.wrapper {

  position: relative;
10
  margin: auto;

}

​

.cyclist {

  width: 48px;

  height: 48px;

  position: absolute;

  transform: translateY(-50%);  // position the rider above the curve. could be done with offset-position but it has no browser support yet

  offset-path: path("M1 260C65.034 260.999 102.054 253.632 130.069 241.15C158.083 228.668 177.093 244.645 1.612 258.125C246.13 271.606 296.157 293.574 342.181 258.125C388.6 222.677 405.715 140.297 479.754 139.798C553.793 139.298 591.313 207.699 667.854 258.125C744.395 308.552 782.416 287.783 802.425 269.608C846.949 229.167 924.49 109.841 943 1");

  animation: ride-hills 10s ease-in infinite;
20
}
21
​

@function rem-calc($size) {
  $remSize: $size / 16px;
  @return #{$remSize}rem;
}

@mixin dark-mode {
  @media (prefers-color-scheme: dark) {
    @content;
  }
}

@mixin animete-reduce {
  @media (prefers-reduced-motion: reduce) {
    *, ::before, ::after {
      animation-delay: -1ms !important;
      animation-duration: 1ms !important;
      animation-iteration-count: 1 !important;
      background-attachment: initial !important;
      scroll-behavior: auto !important;
      transition-delay: 0s !important;
      transition-duration: 0s !important;
    }
  }
}

@mixin light-mode {
	@media (prefers-color-scheme: light) {
      @content;
    }
}

/// Apply `$function` with `$args` to each item from `$list`.
/// @author Kitty Giraudel
/// @param {List} $list - List of items
/// @param {String} $function - Function to apply to every item from `$list`
/// @param {Arglist} $args - Extra arguments to pass to `$function`
/// @return {List}
/// @throw There is no `#{$function}` function.
@function walk($list, $function, $args...) {
  @if not function-exists($function) {
    @error "There is no `#{$function}` function.";
  }
  
  @for $i from 1 through length($list) {
    $list: set-nth($list, $i, call($function, nth($list, $i), $args...));
  }
  
  @return $list;
}

//FOR THE PRE STYLE MONOCODE FONT IN SS ONLY ONLY
[data-section-id="605471fe6055c808f219a123"] pre { 
    margin-bottom: 0px;
    margin-top: 0;
    transform: rotate(
-90deg);
    transform-origin: top left;
    position: absolute;
    width: 200px;
    bottom: -100px;
}
//IS THERE WHERE DOES THIS GO IN THE SCSS??
.sqs-block-html .sqs-block-content *:not(h1):not(h2):not(h3) {
    word-wrap: break-word;
}

// Full Width Image Card - Page Section //

[data-section-id="012345"] {
  overflow-x: hidden !important;
  overflow-y: hidden !important;
    .content-wrapper  {
      padding: auto !important;
      margin: 0px auto;
      display: contents;
    }
.sqs-layout .sqs-row .sqs-block {
  padding-bottom: 0px !important;
  padding-top: 0px !important;
}}

// Full Width Image Card - Text Padding //
  
.image-card-wrapper .sqs-dynamic-text-container {
  padding: 40px !important;
}