<div class="grid--three-uneven">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="video">
        <iframe src="https://www.youtube-nocookie.com/embed/TLpCuxFM-AQ" title="YouTube video player" height="315" width="560" frameborder="0" allow="accelerometer; 
      autoplay;
      clipboard-write;
      encrypted-media;
      gyroscope;
      picture-in-picture" allowfullscreen></iframe>
    </div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
    <div class="grid-item">10</div>
    <div class="grid-item">11</div>
    <div class="grid-item">12</div>
    <div class="grid-item">13</div>
    <div class="grid-item">14</div>
    <div class="grid-item">15</div>
    <div class="grid-item">16</div>
    <div class="grid-item">17</div>
    <div class="grid-item">18</div>
    <div class="grid-item">19</div>
    <div class="grid-item">20</div>
    <div class="grid-item">21</div>
    <div class="grid-item">22</div>
    <div class="grid-item">23</div>
</div>
{{!-- <div class="grid--{{ name }}"> --}}
<div class="grid--three-uneven">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="video">
    <iframe src="https://www.youtube-nocookie.com/embed/TLpCuxFM-AQ" title="YouTube video player" height="315" width="560" frameborder="0" allow="accelerometer; 
      autoplay;
      clipboard-write;
      encrypted-media;
      gyroscope;
      picture-in-picture" allowfullscreen></iframe>
  </div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
  <div class="grid-item">10</div>
  <div class="grid-item">11</div>
  <div class="grid-item">12</div>
  <div class="grid-item">13</div>
  <div class="grid-item">14</div>
  <div class="grid-item">15</div>
  <div class="grid-item">16</div>
  <div class="grid-item">17</div>
  <div class="grid-item">18</div>
  <div class="grid-item">19</div>
  <div class="grid-item">20</div>
  <div class="grid-item">21</div>
  <div class="grid-item">22</div>
  <div class="grid-item">23</div>
</div>
{{!-- </div> --}}
{
  "gridItems": [
    {
      "text": "1"
    },
    {
      "text": "2"
    },
    {
      "text": "3"
    },
    {
      "text": "4"
    },
    {
      "text": "5"
    },
    {
      "text": "6"
    },
    {
      "text": "7"
    },
    {
      "text": "8"
    },
    {
      "text": "9"
    },
    {
      "text": "10"
    },
    {
      "text": "11"
    },
    {
      "text": "12"
    },
    {
      "text": "13"
    },
    {
      "text": "14"
    },
    {
      "text": "15"
    },
    {
      "text": "16"
    },
    {
      "text": "17"
    },
    {
      "text": "18"
    },
    {
      "text": "19"
    },
    {
      "text": "20"
    },
    {
      "text": "21"
    },
    {
      "text": "22"
    },
    {
      "text": "23"
    },
    {
      "text": "24"
    }
  ]
}
  • Content:
    .grid-item {
      background-color: var(--color-anchor);
      color: var(--color-white);
      border-radius: 5px;
      padding: 20px;
      font-size: 150%;
      height: 200px;
    
      &:nth-child(even) {
        background-color: var(--color-cloud);
        color: var(--color-charcoal);
      }
    }
    
    .grid--three-uneven {
      display: grid;
      grid-template-columns: 1fr 4fr 1fr;
      gap: 1rem;
      
    
      &.video {
        grid-column: 2;
        grid-row: 3;
      }
    }
    
  • URL: /components/raw/variations/variations.css
  • Filesystem Path: src/components/03-grids/03-variations/variations.css
  • Size: 413 Bytes
  • Handle: @variations--default
  • Preview:
  • Filesystem Path: src/components/03-grids/03-variations/variations.hbs

No notes defined.