docs: update documentation

Author: mrholek

docs/4.0/components/CCard.mdx

@@ -701,7 +701,7 @@ Change it to `md={{ cols: 3}}` and you'll see the fourth card wrap.
 When you need equal height, add `.h-100` to the cards. If you want equal heights by default, you can set `$card-height: 100%` in Sass.
 
 <Playground>
-  <CRow cols="1" colsMd="3" className="g-4">
+  <CRow xs={{ cols: 1 }} md={{ cols: 3 }} className="g-4">
     <CCol xs>
       <CCard className="h-100">
         <CCardImage component="svg" orientation="top" className="docs-placeholder-img" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></CCardImage>
@@ -744,7 +744,7 @@ When you need equal height, add `.h-100` to the cards. If you want equal heights
 Just like with card groups, card footers will automatically line up.
 
 <Playground>
-  <CRow cols="1" colsMd="3" className="g-4">
+  <CRow xs={{ cols: 1 }} md={{ cols: 3 }} className="g-4">
     <CCol xs>
       <CCard className="h-100">
         <CCardImage component="svg" orientation="top" className="docs-placeholder-img" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></CCardImage>

docs/4.0/components/CFooter.mdx

@@ -16,7 +16,7 @@ import { CFooter, CLink } from '../../../src/index.ts'
   <CFooter>
     <div>
       <CLink href="https://coreui.io">CoreUI</CLink>
-      <span>&copy; 2020 creativeLabs.</span>
+      <span>&copy; 2021 creativeLabs.</span>
     </div>
     <div>
       <span>Powered by</span>

docs/4.0/components/CModal.mdx

@@ -467,7 +467,7 @@ Modals have three optional sizes, available via modifier classes to be placed on
       <>
         <CButton onClick={() => setVisibleXL(!visibleXL)}>Extra large modal</CButton>
         <CButton onClick={() => setVisibleLg(!visibleLg)}>Large modal</CButton>
-        <CButton onClick={() => setVisibleSm(!visibleSm)}>Small large modal</CButton>
+        <CButton onClick={() => setVisibleSm(!visibleSm)}>Small modal</CButton>
         <CModal size="xl" visible={visibleXL}>
           <CModalHeader onDismiss={() => setVisibleXL(false)}>
             <CModalTitle>Extra large modal</CModalTitle>

docs/4.0/layout/breakpoints.mdx

@@ -5,6 +5,8 @@ menu: Layout
 route: "/layout/breakpoints"
 ---
 
+import { CCallout } from '../../../src/index.ts'
+
 ## Core concepts
 
 - **Breakpoints are the building blocks of responsive design.** Use them to control when your layout can be adapted at a particular viewport or device size.
@@ -63,7 +65,16 @@ Each breakpoint was chosen to comfortably hold containers whose widths are multi
 
 These breakpoints are customizable via Sass—you'll find them in a Sass map in our `_variables.scss` stylesheet.
 
-{{< scss-docs name="grid-breakpoints" file="scss/_variables.scss" >}}
+```scss
+$grid-breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px,
+  xxl: 1400px
+);
+```
 
 For more information and examples on how to modify our Sass maps and variables, please refer to [the Sass section of the Grid documentation](https://coreui.io/docs/4.0/layout/grid#sass).
 
@@ -162,9 +173,9 @@ These mixins take those declared breakpoints, subtract `.02px` from them, and us
 // No media query since the xxl breakpoint has no upper bound on its width
 ```
 
-{{< callout warning >}}
-{{< partial "callout-info-mediaqueries-breakpoints.md" >}}
-{{< /callout >}}
+<CCallout color="warning">
+  <strong>Why subtract .02px?</strong> Browsers don’t currently support <a href="https://www.w3.org/TR/mediaqueries-4/#range-context">range context queries</a>, so we work around the limitations of <a href="https://www.w3.org/TR/mediaqueries-4/#mq-min-max"><code>min-</code> and <code>max-</code> prefixes</a> and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision.
+</CCallout>
 
 ### Single breakpoint