Skip to content

Instantly share code, notes, and snippets.

@lexyking

lexyking/index.html

Created April 1, 2019 23:24
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save lexyking/ef5292d23fd3f83a7a3a8f422b3bb88b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save lexyking/ef5292d23fd3f83a7a3a8f422b3bb88b to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. lexyking created this gist Apr 1, 2019.
    968 changes: 968 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,968 @@
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Cake today</title>
    <style id="jsbin-css">
    /* Base styles */
    body {
    background-color: #ddd;
    font-family: Arial;
    }
    img {
    width: 100%;
    }
    .small {
    font-size: 12px;
    }
    .image-style {
    padding: 5px;
    border-radius: 5px;
    }

    /* Header */
    .header {
    background-color: white;
    height: 80px;
    margin-bottom: 20px;
    }
    .header__logo {
    height: 100%;
    width: 200px;
    }
    .header__logo img {
    background-color: #aaa;
    }

    /* Nav */
    .navigation {
    background-color: white;
    margin-bottom: 20px;
    }
    .navigation__list {
    display: flex;
    padding-top: 10px;
    padding-bottom: 10px;
    margin: 0;
    padding: 0;
    }
    .navigation__list-item {
    display: inline-flex;
    background-color: #aaa;
    height: 100%;
    width: 100px;
    padding: 5px 10px;
    margin: 5px 10px;
    }
    .navigation__list-item:hover {
    background-color: #333;
    }
    .navigation__list-item-link {
    text-decoration: none;
    color: white;
    width: 100%;
    text-align: center;
    }

    /* Main */
    .main-content {
    /* display: flex; */
    }
    .company-info {
    background-color: white;
    margin-bottom: 20px;


    }
    .company-info__greeting {
    padding: 10px;
    }
    .company-info__greeting h6 {
    margin: 10px 0;
    line-height: 1.4;
    }

    /* Carousel */

    .carousel {
    background-color: white;
    margin-bottom: 20px;

    padding: 10px;
    }
    .carousel__main-image {
    height: 70%;
    /* width: 100%; */
    background-color: #aaa;
    margin-bottom: 10px;
    overflow: hidden;
    }
    .carousel__thumbnail-wrapper {
    height: calc(30% - 10px);
    max-height: 70px;
    /* width: 100%; */
    margin-bottom: 10px;
    display: flex;
    }
    .carousel__thumbnail {
    height: 100%;
    /* width: 25%; */
    border: 1px solid #aaa;
    }
    .carousel__thumbnail img {
    background-color: #aaa;
    }


    /* Highlights */

    .highlights {
    background-color: white;
    margin-bottom: 20px;
    padding: 0;
    /* display: flex;
    flex-wrap: wrap;
    flex-direction: row; */
    }
    .highlights__thumbnail-wrapper {
    height: 100%;
    width: 100%;

    border: 2px solid red;
    }
    .highlights__thumbnail-image{
    border: 2px solid blue;



    }
    .highlights__thumbnail-image img {
    background-color: #aaa;
    border: 1px solid #aaa;
    }



    /* GRID */

    /* Custom grid */
    * {
    box-sizing: border-box;
    /* background: red; */
    }

    /* Containers */

    .container {
    max-width: 100%; /* default from breakpoint 0, until another breakpoint overrides it */
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    }

    @media (min-width: 576px) {
    .container {
    max-width: 540px;
    }
    }

    @media (min-width: 768px) {
    .container {
    max-width: 720px;
    }
    }

    @media (min-width: 992px) {
    .container {
    max-width: 960px;
    }
    }

    @media (min-width: 1200px) {
    .container {
    max-width: 1140px;
    }
    }

    /* Wrap each bundle of content blocks in a row */
    /* For example, 4 blocks that 'live' together in a row, and then get stacked on mobile */
    /* they should be together inside a wrapper with the class 'row' */

    .row {
    display: flex;
    flex-wrap: wrap;
    /* margin-right: -15px;
    margin-left: -15px; */
    }

    /* Default styles for all col-classes */

    .xs-col-1, .xs-col-2, .xs-col-3, .xs-col-4, .xs-col-5, .xs-col-6, .xs-col-7, .xs-col-8, .xs-col-9, .xs-col-10, .xs-col-11, .xs-col-12,
    .sm-col-1, .sm-col-2, .sm-col-3, .sm-col-4, .sm-col-5, .sm-col-6, .sm-col-7, .sm-col-8, .sm-col-9, .sm-col-10, .sm-col-11, .sm-col-12,
    .md-col-1, .md-col-2, .md-col-3, .md-col-4, .md-col-5, .md-col-6, .md-col-7, .md-col-8, .md-col-9, .md-col-10, .md-col-11, .md-col-12,
    .lg-col-1, .lg-col-2, .lg-col-3, .lg-col-4, .lg-col-5, .lg-col-6, .lg-col-7, .lg-col-8, .lg-col-9, .lg-col-10, .lg-col-11, .lg-col-12,
    .xl-col-1, .xl-col-2, .xl-col-3, .xl-col-4, .xl-col-5, .xl-col-6, .xl-col-7, .xl-col-8, .xl-col-9, .xl-col-10, .xl-col-11, .xl-col-12 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
    }

    /* INDIVIDUAL BREAKPOINTS */

    /* Extra Small */

    @media (min-width: 320px) {
    .xs-col-1 {
    width: 8.333333%;
    }
    .xs-col-2 {
    width: 16.666666%;
    }
    .xs-col-3 {
    width: 25%;
    }
    .xs-col-4 {
    width: 33.333333%;
    }
    .xs-col-5 {
    width: 41.666666%;
    }
    .xs-col-6 {
    width: 50%;
    }
    .xs-col-7 {
    width: 58.333%;
    }
    .xs-col-8 {
    width: 66.666666%;
    }
    .xs-col-9 {
    width: 75%;
    }
    .xs-col-10 {
    width: 83.333333%;
    }
    .xs-col-11 {
    width: 91.666677%;
    }
    .xs-col-12 {
    width: 100%;
    }
    }

    /* Small */

    @media (min-width: 576px) {

    .sm-col-1 {
    width: 8.333333%;
    }
    .sm-col-2 {
    width: 16.666666%;
    }
    .sm-col-3 {
    width: 25%;
    }
    .sm-col-4 {
    width: 33.333333%;
    }
    .sm-col-5 {
    width: 41.666666%;
    }
    .sm-col-6 {
    width: 50%;
    }
    .sm-col-7 {
    width: 58.333%;
    }
    .sm-col-8 {
    width: 66.666666%;
    }
    .sm-col-9 {
    width: 75%;
    }
    .sm-col-10 {
    width: 83.333333%;
    }
    .sm-col-11 {
    width: 91.666677%;
    }
    .sm-col-12 {
    width: 100%;
    }
    }

    /* Medium */

    @media (min-width: 768px) {

    .md-col-1 {
    width: 8.333333%;
    }
    .md-col-2 {
    width: 16.666666%;
    }
    .md-col-3 {
    width: 25%;
    }
    .md-col-4 {
    width: 33.333333%;
    }
    .md-col-5 {
    width: 41.666666%;
    }
    .md-col-6 {
    width: 50%;
    }
    .md-col-7 {
    width: 58.333%;
    }
    .md-col-8 {
    width: 66.666666%;
    }
    .md-col-9 {
    width: 75%;
    }
    .md-col-10 {
    width: 83.333333%;
    }
    .md-col-11 {
    width: 91.666677%;
    }
    .md-col-12 {
    width: 100%;
    }
    }

    /* Large */

    @media (min-width: 992px) {

    .lg-col-1 {
    width: 8.333333%;
    }
    .lg-col-2 {
    width: 16.666666%;
    }
    .lg-col-3 {
    width: 25%;
    }
    .lg-col-4 {
    width: 33.333333%;
    }
    .lg-col-5 {
    width: 41.666666%;
    }
    .lg-col-6 {
    width: 50%;
    }
    .lg-col-7 {
    width: 58.333%;
    }
    .lg-col-8 {
    width: 66.666666%;
    }
    .lg-col-9 {
    width: 75%;
    }
    .lg-col-10 {
    width: 83.333333%;
    }
    .lg-col-11 {
    width: 91.666677%;
    }
    .lg-col-12 {
    width: 100%;
    }
    }
    /* Extra Large */

    @media (min-width: 1200px) {

    .xl-col-1 {
    width: 8.333333%;
    }
    .xl-col-2 {
    width: 16.666666%;
    }
    .xl-col-3 {
    width: 25%;
    }
    .xl-col-4 {
    width: 33.333333%;
    }
    .xl-col-5 {
    width: 41.666666%;
    }
    .xl-col-6 {
    width: 50%;
    }
    .xl-col-7 {
    width: 58.333%;
    }
    .xl-col-8 {
    width: 66.666666%;
    }
    .xl-col-9 {
    width: 75%;
    }
    .xl-col-10 {
    width: 83.333333%;
    }
    .xl-col-11 {
    width: 91.666677%;
    }
    .xl-col-12 {
    width: 100%;
    }
    }
    </style>
    </head>
    <body>
    <div class="container">
    <header class="header">
    <div class="header__logo">
    <img src="/" alt="">
    </div>
    </header>
    <nav class="navigation">
    <ul class="navigation__list">
    <li class="navigation__list-item">
    <a class="navigation__list-item-link" href="">Link</a>
    </li>
    <li class="navigation__list-item">
    <a class="navigation__list-item-link" href="">Link</a>
    </li>
    <li class="navigation__list-item">
    <a class="navigation__list-item-link" href="">Link</a>
    </li>
    <li class="navigation__list-item">
    <a class="navigation__list-item-link" href="">Link</a>
    </li>
    <li class="navigation__list-item">
    <a class="navigation__list-item-link" href="">Link</a>
    </li>
    </ul>
    </nav>

    <main>
    <section class="main-content row">
    <section class="company-info xs-col-12 md-col-4">
    <div class="company-info__greeting">
    <h3>Hello there, welcome to Cake Today</h3>
    <h6>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus dolor, eum perferendis, nesciunt natus itaque magni sapiente dolorem, quae modi molestiae tempora blanditiis exercitationem repellendus aspernatur impedit corrupti expedita veniam?</h6>
    </div>
    </section>
    <section class="carousel xs-col-12 md-col-8">
    <div class="image-style">
    <div class="carousel__main-image xs-col-12">
    <img src="https://i.postimg.cc/wMH9n352/anastasia-dulgier-1155210-unsplash.jpg" alt="">
    </div>
    </div>

    <div class="carousel__thumbnail-wrapper xs-col-12">
    <div class="carousel__thumbnail xs-col-4">
    <img src="https://i.postimg.cc/wMH9n352/anastasia-dulgier-1155210-unsplash.jpg" alt="">
    </div>
    <div class="carousel__thumbnail xs-col-4">
    <img src="/" alt="">
    </div>
    <div class="carousel__thumbnail xs-col-4">
    <img src="/" alt="">
    </div>
    <div class="carousel__thumbnail xs-col-4">
    <img src="/" alt="">
    </div>
    </div>
    </section>
    </section>


    <section class="highlights">

    <div class="highlights__thumbnail-wrapper row">

    <div class="highlights__thumbnail xs-col-12 md-col-6 lg-col-3">
    <div class="highlights__thumbnail-image xs-col-12">
    <img src="https://staticmedia.fauchon.com/media/catalog/product/cache/2/image_a/600x/9df78eab33525d08d6e5fb8d27136e95/1/0/1014427-2.jpg" alt="">
    </div>
    <div class="highlights__thumbnail-caption">
    <p class="small">Image description</p>
    </div>
    </div>
    <div class="highlights__thumbnail xs-col-12 md-col-6 lg-col-3">
    <div class="highlights__thumbnail-image xs-col-12">
    <img src="https://staticmedia.fauchon.com/media/catalog/product/cache/2/image_a/600x/9df78eab33525d08d6e5fb8d27136e95/1/0/1014427-2.jpg" alt="">
    </div>
    <div class="highlights__thumbnail-caption">
    <p class="small">Image description</p>
    </div>
    </div>
    <div class="highlights__thumbnail xs-col-12 md-col-6 lg-col-3">
    <div class="highlights__thumbnail-image xs-col-12">
    <img src="https://staticmedia.fauchon.com/media/catalog/product/cache/2/image_a/600x/9df78eab33525d08d6e5fb8d27136e95/1/0/1014427-2.jpg" alt="">
    </div>
    <div class="highlights__thumbnail-caption">
    <p class="small">Image description</p>
    </div>
    </div>
    <div class="highlights__thumbnail xs-col-12 md-col-6 lg-col-3">
    <div class="highlights__thumbnail-image xs-col-12">
    <img src="https://staticmedia.fauchon.com/media/catalog/product/cache/2/image_a/600x/9df78eab33525d08d6e5fb8d27136e95/1/0/1014427-2.jpg" alt="">
    </div>
    <div class="highlights__thumbnail-caption">
    <p class="small">Image description</p>
    </div>
    </div>

    </div>


    </section>


    </main>

    <footer class="footer">
    <nav class="navigation">
    <ul class="navigation__list">
    <li class="navigation__list-item">
    <a class="navigation__list-item-link" href="">Link</a>
    </li>
    <li class="navigation__list-item">
    <a class="navigation__list-item-link" href="">Link</a>
    </li>
    <li class="navigation__list-item">
    <a class="navigation__list-item-link" href="">Link</a>
    </li>
    <li class="navigation__list-item">
    <a class="navigation__list-item-link" href="">Link</a>
    </li>
    <li class="navigation__list-item">
    <a class="navigation__list-item-link" href="">Link</a>
    </li>
    </ul>
    </nav>
    </footer>
    </div>


    <script id="jsbin-source-css" type="text/css">/* Base styles */
    body {
    background-color: #ddd;
    font-family: Arial;
    }
    img {
    width: 100%;
    }
    .small {
    font-size: 12px;
    }
    .image-style {
    padding: 5px;
    border-radius: 5px;
    }

    /* Header */
    .header {
    background-color: white;
    height: 80px;
    margin-bottom: 20px;
    }
    .header__logo {
    height: 100%;
    width: 200px;
    }
    .header__logo img {
    background-color: #aaa;
    }

    /* Nav */
    .navigation {
    background-color: white;
    margin-bottom: 20px;
    }
    .navigation__list {
    display: flex;
    padding-top: 10px;
    padding-bottom: 10px;
    margin: 0;
    padding: 0;
    }
    .navigation__list-item {
    display: inline-flex;
    background-color: #aaa;
    height: 100%;
    width: 100px;
    padding: 5px 10px;
    margin: 5px 10px;
    }
    .navigation__list-item:hover {
    background-color: #333;
    }
    .navigation__list-item-link {
    text-decoration: none;
    color: white;
    width: 100%;
    text-align: center;
    }

    /* Main */
    .main-content {
    /* display: flex; */
    }
    .company-info {
    background-color: white;
    margin-bottom: 20px;


    }
    .company-info__greeting {
    padding: 10px;
    }
    .company-info__greeting h6 {
    margin: 10px 0;
    line-height: 1.4;
    }

    /* Carousel */

    .carousel {
    background-color: white;
    margin-bottom: 20px;

    padding: 10px;
    }
    .carousel__main-image {
    height: 70%;
    /* width: 100%; */
    background-color: #aaa;
    margin-bottom: 10px;
    overflow: hidden;
    }
    .carousel__thumbnail-wrapper {
    height: calc(30% - 10px);
    max-height: 70px;
    /* width: 100%; */
    margin-bottom: 10px;
    display: flex;
    }
    .carousel__thumbnail {
    height: 100%;
    /* width: 25%; */
    border: 1px solid #aaa;
    }
    .carousel__thumbnail img {
    background-color: #aaa;
    }


    /* Highlights */

    .highlights {
    background-color: white;
    margin-bottom: 20px;
    padding: 0;
    /* display: flex;
    flex-wrap: wrap;
    flex-direction: row; */
    }
    .highlights__thumbnail-wrapper {
    height: 100%;
    width: 100%;

    border: 2px solid red;
    }
    .highlights__thumbnail-image{
    border: 2px solid blue;



    }
    .highlights__thumbnail-image img {
    background-color: #aaa;
    border: 1px solid #aaa;
    }



    /* GRID */

    /* Custom grid */
    * {
    box-sizing: border-box;
    /* background: red; */
    }

    /* Containers */

    .container {
    max-width: 100%; /* default from breakpoint 0, until another breakpoint overrides it */
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    }

    @media (min-width: 576px) {
    .container {
    max-width: 540px;
    }
    }

    @media (min-width: 768px) {
    .container {
    max-width: 720px;
    }
    }

    @media (min-width: 992px) {
    .container {
    max-width: 960px;
    }
    }

    @media (min-width: 1200px) {
    .container {
    max-width: 1140px;
    }
    }

    /* Wrap each bundle of content blocks in a row */
    /* For example, 4 blocks that 'live' together in a row, and then get stacked on mobile */
    /* they should be together inside a wrapper with the class 'row' */

    .row {
    display: flex;
    flex-wrap: wrap;
    /* margin-right: -15px;
    margin-left: -15px; */
    }

    /* Default styles for all col-classes */

    .xs-col-1, .xs-col-2, .xs-col-3, .xs-col-4, .xs-col-5, .xs-col-6, .xs-col-7, .xs-col-8, .xs-col-9, .xs-col-10, .xs-col-11, .xs-col-12,
    .sm-col-1, .sm-col-2, .sm-col-3, .sm-col-4, .sm-col-5, .sm-col-6, .sm-col-7, .sm-col-8, .sm-col-9, .sm-col-10, .sm-col-11, .sm-col-12,
    .md-col-1, .md-col-2, .md-col-3, .md-col-4, .md-col-5, .md-col-6, .md-col-7, .md-col-8, .md-col-9, .md-col-10, .md-col-11, .md-col-12,
    .lg-col-1, .lg-col-2, .lg-col-3, .lg-col-4, .lg-col-5, .lg-col-6, .lg-col-7, .lg-col-8, .lg-col-9, .lg-col-10, .lg-col-11, .lg-col-12,
    .xl-col-1, .xl-col-2, .xl-col-3, .xl-col-4, .xl-col-5, .xl-col-6, .xl-col-7, .xl-col-8, .xl-col-9, .xl-col-10, .xl-col-11, .xl-col-12 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
    }

    /* INDIVIDUAL BREAKPOINTS */

    /* Extra Small */

    @media (min-width: 320px) {
    .xs-col-1 {
    width: 8.333333%;
    }
    .xs-col-2 {
    width: 16.666666%;
    }
    .xs-col-3 {
    width: 25%;
    }
    .xs-col-4 {
    width: 33.333333%;
    }
    .xs-col-5 {
    width: 41.666666%;
    }
    .xs-col-6 {
    width: 50%;
    }
    .xs-col-7 {
    width: 58.333%;
    }
    .xs-col-8 {
    width: 66.666666%;
    }
    .xs-col-9 {
    width: 75%;
    }
    .xs-col-10 {
    width: 83.333333%;
    }
    .xs-col-11 {
    width: 91.666677%;
    }
    .xs-col-12 {
    width: 100%;
    }
    }

    /* Small */

    @media (min-width: 576px) {

    .sm-col-1 {
    width: 8.333333%;
    }
    .sm-col-2 {
    width: 16.666666%;
    }
    .sm-col-3 {
    width: 25%;
    }
    .sm-col-4 {
    width: 33.333333%;
    }
    .sm-col-5 {
    width: 41.666666%;
    }
    .sm-col-6 {
    width: 50%;
    }
    .sm-col-7 {
    width: 58.333%;
    }
    .sm-col-8 {
    width: 66.666666%;
    }
    .sm-col-9 {
    width: 75%;
    }
    .sm-col-10 {
    width: 83.333333%;
    }
    .sm-col-11 {
    width: 91.666677%;
    }
    .sm-col-12 {
    width: 100%;
    }
    }

    /* Medium */

    @media (min-width: 768px) {

    .md-col-1 {
    width: 8.333333%;
    }
    .md-col-2 {
    width: 16.666666%;
    }
    .md-col-3 {
    width: 25%;
    }
    .md-col-4 {
    width: 33.333333%;
    }
    .md-col-5 {
    width: 41.666666%;
    }
    .md-col-6 {
    width: 50%;
    }
    .md-col-7 {
    width: 58.333%;
    }
    .md-col-8 {
    width: 66.666666%;
    }
    .md-col-9 {
    width: 75%;
    }
    .md-col-10 {
    width: 83.333333%;
    }
    .md-col-11 {
    width: 91.666677%;
    }
    .md-col-12 {
    width: 100%;
    }
    }

    /* Large */

    @media (min-width: 992px) {

    .lg-col-1 {
    width: 8.333333%;
    }
    .lg-col-2 {
    width: 16.666666%;
    }
    .lg-col-3 {
    width: 25%;
    }
    .lg-col-4 {
    width: 33.333333%;
    }
    .lg-col-5 {
    width: 41.666666%;
    }
    .lg-col-6 {
    width: 50%;
    }
    .lg-col-7 {
    width: 58.333%;
    }
    .lg-col-8 {
    width: 66.666666%;
    }
    .lg-col-9 {
    width: 75%;
    }
    .lg-col-10 {
    width: 83.333333%;
    }
    .lg-col-11 {
    width: 91.666677%;
    }
    .lg-col-12 {
    width: 100%;
    }
    }
    /* Extra Large */

    @media (min-width: 1200px) {

    .xl-col-1 {
    width: 8.333333%;
    }
    .xl-col-2 {
    width: 16.666666%;
    }
    .xl-col-3 {
    width: 25%;
    }
    .xl-col-4 {
    width: 33.333333%;
    }
    .xl-col-5 {
    width: 41.666666%;
    }
    .xl-col-6 {
    width: 50%;
    }
    .xl-col-7 {
    width: 58.333%;
    }
    .xl-col-8 {
    width: 66.666666%;
    }
    .xl-col-9 {
    width: 75%;
    }
    .xl-col-10 {
    width: 83.333333%;
    }
    .xl-col-11 {
    width: 91.666677%;
    }
    .xl-col-12 {
    width: 100%;
    }
    }</script>
    </body>
    </html>
    414 changes: 414 additions & 0 deletions jsbin.xoqejic.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,414 @@
    /* Base styles */
    body {
    background-color: #ddd;
    font-family: Arial;
    }
    img {
    width: 100%;
    }
    .small {
    font-size: 12px;
    }
    .image-style {
    padding: 5px;
    border-radius: 5px;
    }

    /* Header */
    .header {
    background-color: white;
    height: 80px;
    margin-bottom: 20px;
    }
    .header__logo {
    height: 100%;
    width: 200px;
    }
    .header__logo img {
    background-color: #aaa;
    }

    /* Nav */
    .navigation {
    background-color: white;
    margin-bottom: 20px;
    }
    .navigation__list {
    display: flex;
    padding-top: 10px;
    padding-bottom: 10px;
    margin: 0;
    padding: 0;
    }
    .navigation__list-item {
    display: inline-flex;
    background-color: #aaa;
    height: 100%;
    width: 100px;
    padding: 5px 10px;
    margin: 5px 10px;
    }
    .navigation__list-item:hover {
    background-color: #333;
    }
    .navigation__list-item-link {
    text-decoration: none;
    color: white;
    width: 100%;
    text-align: center;
    }

    /* Main */
    .main-content {
    /* display: flex; */
    }
    .company-info {
    background-color: white;
    margin-bottom: 20px;


    }
    .company-info__greeting {
    padding: 10px;
    }
    .company-info__greeting h6 {
    margin: 10px 0;
    line-height: 1.4;
    }

    /* Carousel */

    .carousel {
    background-color: white;
    margin-bottom: 20px;

    padding: 10px;
    }
    .carousel__main-image {
    height: 70%;
    /* width: 100%; */
    background-color: #aaa;
    margin-bottom: 10px;
    overflow: hidden;
    }
    .carousel__thumbnail-wrapper {
    height: calc(30% - 10px);
    max-height: 70px;
    /* width: 100%; */
    margin-bottom: 10px;
    display: flex;
    }
    .carousel__thumbnail {
    height: 100%;
    /* width: 25%; */
    border: 1px solid #aaa;
    }
    .carousel__thumbnail img {
    background-color: #aaa;
    }


    /* Highlights */

    .highlights {
    background-color: white;
    margin-bottom: 20px;
    padding: 0;
    /* display: flex;
    flex-wrap: wrap;
    flex-direction: row; */
    }
    .highlights__thumbnail-wrapper {
    height: 100%;
    width: 100%;

    border: 2px solid red;
    }
    .highlights__thumbnail-image{
    border: 2px solid blue;



    }
    .highlights__thumbnail-image img {
    background-color: #aaa;
    border: 1px solid #aaa;
    }



    /* GRID */

    /* Custom grid */
    * {
    box-sizing: border-box;
    /* background: red; */
    }

    /* Containers */

    .container {
    max-width: 100%; /* default from breakpoint 0, until another breakpoint overrides it */
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    }

    @media (min-width: 576px) {
    .container {
    max-width: 540px;
    }
    }

    @media (min-width: 768px) {
    .container {
    max-width: 720px;
    }
    }

    @media (min-width: 992px) {
    .container {
    max-width: 960px;
    }
    }

    @media (min-width: 1200px) {
    .container {
    max-width: 1140px;
    }
    }

    /* Wrap each bundle of content blocks in a row */
    /* For example, 4 blocks that 'live' together in a row, and then get stacked on mobile */
    /* they should be together inside a wrapper with the class 'row' */

    .row {
    display: flex;
    flex-wrap: wrap;
    /* margin-right: -15px;
    margin-left: -15px; */
    }

    /* Default styles for all col-classes */

    .xs-col-1, .xs-col-2, .xs-col-3, .xs-col-4, .xs-col-5, .xs-col-6, .xs-col-7, .xs-col-8, .xs-col-9, .xs-col-10, .xs-col-11, .xs-col-12,
    .sm-col-1, .sm-col-2, .sm-col-3, .sm-col-4, .sm-col-5, .sm-col-6, .sm-col-7, .sm-col-8, .sm-col-9, .sm-col-10, .sm-col-11, .sm-col-12,
    .md-col-1, .md-col-2, .md-col-3, .md-col-4, .md-col-5, .md-col-6, .md-col-7, .md-col-8, .md-col-9, .md-col-10, .md-col-11, .md-col-12,
    .lg-col-1, .lg-col-2, .lg-col-3, .lg-col-4, .lg-col-5, .lg-col-6, .lg-col-7, .lg-col-8, .lg-col-9, .lg-col-10, .lg-col-11, .lg-col-12,
    .xl-col-1, .xl-col-2, .xl-col-3, .xl-col-4, .xl-col-5, .xl-col-6, .xl-col-7, .xl-col-8, .xl-col-9, .xl-col-10, .xl-col-11, .xl-col-12 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
    }

    /* INDIVIDUAL BREAKPOINTS */

    /* Extra Small */

    @media (min-width: 320px) {
    .xs-col-1 {
    width: 8.333333%;
    }
    .xs-col-2 {
    width: 16.666666%;
    }
    .xs-col-3 {
    width: 25%;
    }
    .xs-col-4 {
    width: 33.333333%;
    }
    .xs-col-5 {
    width: 41.666666%;
    }
    .xs-col-6 {
    width: 50%;
    }
    .xs-col-7 {
    width: 58.333%;
    }
    .xs-col-8 {
    width: 66.666666%;
    }
    .xs-col-9 {
    width: 75%;
    }
    .xs-col-10 {
    width: 83.333333%;
    }
    .xs-col-11 {
    width: 91.666677%;
    }
    .xs-col-12 {
    width: 100%;
    }
    }

    /* Small */

    @media (min-width: 576px) {

    .sm-col-1 {
    width: 8.333333%;
    }
    .sm-col-2 {
    width: 16.666666%;
    }
    .sm-col-3 {
    width: 25%;
    }
    .sm-col-4 {
    width: 33.333333%;
    }
    .sm-col-5 {
    width: 41.666666%;
    }
    .sm-col-6 {
    width: 50%;
    }
    .sm-col-7 {
    width: 58.333%;
    }
    .sm-col-8 {
    width: 66.666666%;
    }
    .sm-col-9 {
    width: 75%;
    }
    .sm-col-10 {
    width: 83.333333%;
    }
    .sm-col-11 {
    width: 91.666677%;
    }
    .sm-col-12 {
    width: 100%;
    }
    }

    /* Medium */

    @media (min-width: 768px) {

    .md-col-1 {
    width: 8.333333%;
    }
    .md-col-2 {
    width: 16.666666%;
    }
    .md-col-3 {
    width: 25%;
    }
    .md-col-4 {
    width: 33.333333%;
    }
    .md-col-5 {
    width: 41.666666%;
    }
    .md-col-6 {
    width: 50%;
    }
    .md-col-7 {
    width: 58.333%;
    }
    .md-col-8 {
    width: 66.666666%;
    }
    .md-col-9 {
    width: 75%;
    }
    .md-col-10 {
    width: 83.333333%;
    }
    .md-col-11 {
    width: 91.666677%;
    }
    .md-col-12 {
    width: 100%;
    }
    }

    /* Large */

    @media (min-width: 992px) {

    .lg-col-1 {
    width: 8.333333%;
    }
    .lg-col-2 {
    width: 16.666666%;
    }
    .lg-col-3 {
    width: 25%;
    }
    .lg-col-4 {
    width: 33.333333%;
    }
    .lg-col-5 {
    width: 41.666666%;
    }
    .lg-col-6 {
    width: 50%;
    }
    .lg-col-7 {
    width: 58.333%;
    }
    .lg-col-8 {
    width: 66.666666%;
    }
    .lg-col-9 {
    width: 75%;
    }
    .lg-col-10 {
    width: 83.333333%;
    }
    .lg-col-11 {
    width: 91.666677%;
    }
    .lg-col-12 {
    width: 100%;
    }
    }
    /* Extra Large */

    @media (min-width: 1200px) {

    .xl-col-1 {
    width: 8.333333%;
    }
    .xl-col-2 {
    width: 16.666666%;
    }
    .xl-col-3 {
    width: 25%;
    }
    .xl-col-4 {
    width: 33.333333%;
    }
    .xl-col-5 {
    width: 41.666666%;
    }
    .xl-col-6 {
    width: 50%;
    }
    .xl-col-7 {
    width: 58.333%;
    }
    .xl-col-8 {
    width: 66.666666%;
    }
    .xl-col-9 {
    width: 75%;
    }
    .xl-col-10 {
    width: 83.333333%;
    }
    .xl-col-11 {
    width: 91.666677%;
    }
    .xl-col-12 {
    width: 100%;
    }
    }