## Figures

#### Figure Default

Figure Title
Standard description below the image.
HTML

    <figure>
                <img
                    src="https://via.placeholder.com/600x400"
                    alt="Image with title caption"
                />
                <figcaption class="figcaption--title">Figure Title</figcaption>
                <figcaption>Standard description below the image.</figcaption>
            </figure>

#### Figure Rounded

Figure Title
Standard description below the image.
HTML

    <figure class="figure--rounded">
                <img
                    src="https://via.placeholder.com/600x400"
                    alt="Image with title caption"
                />
                <figcaption class="figcaption--title">Figure Title</figcaption>
                <figcaption>Standard description below the image.</figcaption>
            </figure>

#### Figure Aspect Ratio 16x9

Figure Title
Image constrained to 16:9 ratio using utility class.
HTML

    <figure class="figure--rounded">
                <div class="aspect_ratio--16x9">
                    <img
                        src="https://via.placeholder.com/1280x720"
                        alt="16x9 Aspect Ratio"
                    />
                </div>
                <figcaption class="figcaption--title">Figure Title</figcaption>
                <figcaption>
                    Image constrained to 16:9 ratio
                    using utility class.
                </figcaption>
            </figure>

#### Figure Aspect Ratio 2x3

Figure Title
Image constrained to 2:3 ratio using utility class.
HTML

    <figure class="figure--rounded">
                <div class="aspect_ratio--2x3">
                    <img
                        src="https://via.placeholder.com/1280x720"
                        alt="2x3 Aspect Ratio"
                    />
                </div>
                <figcaption class="figcaption--title">Figure Title</figcaption>
                <figcaption>
                    Image constrained to 2:3 ratio
                    using utility class.
                </figcaption>
            </figure>

#### Figure Aspect Ratio 3x4

Figure Title
Image constrained to 3:4 ratio using utility class.
HTML

    <figure class="figure--rounded">
                <div class="aspect_ratio--3x4">
                    <img
                        src="https://via.placeholder.com/1280x720"
                        alt="3x4 Aspect Ratio"
                    />
                </div>
                <figcaption class="figcaption--title">Figure Title</figcaption>
                <figcaption>
                    Image constrained to 3:4 ratio
                    using utility class.
                </figcaption>
            </figure>

#### Figure Aspect Ratio 4x3

Figure Title
Image constrained to 4:3 ratio using utility class.
HTML

    <figure class="figure--rounded">
                <div class="aspect_ratio--4x3">
                    <img
                        src="https://via.placeholder.com/1280x720"
                        alt="4x3 Aspect Ratio"
                    />
                </div>
                <figcaption class="figcaption--title">Figure Title</figcaption>
                <figcaption>
                    Image constrained to 4:3 ratio
                    using utility class.
                </figcaption>
            </figure>

#### Figure Aspect Ratio 3x2

Figure Title
Image constrained to 3:2 ratio using utility class.
HTML

    <figure class="figure--rounded">
                <div class="aspect_ratio--3x2">
                    <img
                        src="https://via.placeholder.com/1280x720"
                        alt="3x2 Aspect Ratio"
                    />
                </div>
                <figcaption class="figcaption--title">Figure Title</figcaption>
                <figcaption>
                    Image constrained to 3:2 ratio
                    using utility class.
                </figcaption>
            </figure>

#### Figure Aspect Ratio 1x1

Figure Title
Image constrained to 1:1 ratio using utility class.
HTML

    <figure class="figure--rounded">
                <div class="aspect_ratio--1x1">
                    <img
                        src="https://via.placeholder.com/1280x720"
                        alt="1x1 Aspect Ratio"
                    />
                </div>
                <figcaption class="figcaption--title">Figure Title</figcaption>
                <figcaption>
                    Image constrained to 1:1 ratio
                    using utility class.
                </figcaption>
            </figure>

- Latest update: Stylescape v0.1 now live!
- New components released today.
- 💡 Tip: Use mixins for modular SCSS!