// Does this page look kind of blah? Maybe you can't see the grid. Learn how to enable CSS Grid in your browser:
// https://igalia.github.io/css-grid-layout/enable.html

.flex__container
  .empty
  .text   
    .smallgrid
      .text__headline
        h1 Lorem ipsum dolor sit amet, consectetur adipisicing
      .text__subheadline
        h2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus pariatur doloribus qui, at commodi cupiditate
      .text__columns
        p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam blanditiis id quisquam officiis omnis repudiandae voluptatem odit architecto rem eius quis incidunt, est voluptate aliquid dicta. Quae omnis, facere possimus!
        
        p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia alias veritatis accusantium voluptates fugiat adipisci ipsum quisquam magnam, praesentium ducimus impedit similique rem voluptatum beatae obcaecati modi odit illo, aliquid, soluta et ea ullam. Veritatis quod voluptatem, illum fuga facilis aliquid eligendi laborum sint, voluptatibus, perferendis error quos, maiores nulla.
        
        p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste aliquam nisi maiores, sapiente sed ipsa ratione in sequi suscipit labore architecto tenetur hic, minima modi at reiciendis atque nihil doloribus. Distinctio suscipit commodi soluta aliquid mollitia molestias natus itaque delectus.
        
        p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam blanditiis id quisquam officiis omnis repudiandae voluptatem odit architecto rem eius quis incidunt, est voluptate aliquid dicta. Quae omnis, facere possimus!
        
        p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia alias veritatis accusantium voluptates fugiat adipisci ipsum quisquam magnam, praesentium ducimus impedit similique rem voluptatum beatae obcaecati modi odit illo, aliquid, soluta et ea ullam. Veritatis quod voluptatem, illum fuga facilis aliquid eligendi laborum sint, voluptatibus, perferendis error quos, maiores nulla.
        
        p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste aliquam nisi maiores, sapiente sed ipsa ratione in sequi suscipit labore architecto tenetur hic, minima modi at reiciendis atque nihil doloribus. Distinctio suscipit commodi soluta aliquid mollitia molestias natus itaque delectus.

// variables
$blue: rgba(#0277BD, 0.5)
$med-blue: rgba(#039BE5, 0.5)

// general styles
body
  margin: 0

// this styles the flex container

.flex__container
  background:
    image: url(https://images.unsplash.com/photo-1429280064633-adb9d2bea577)
    size: cover
    position: center left

@media (min-width: 650px)
  .flex__container
    background:
      image: url(https://images.unsplash.com/photo-1429280064633-adb9d2bea577)
      size: cover
      position: center left
      height: 100vh
  
@media (min-width: 660px)
  .flex__container
    height: 100%
  
@media (min-width: 900px)
  .flex__container
    display: flex    
 
// sets each flex item to 50% of the viewport

.empty,
.text
  flex: 1 1 50%

// the right side of the viewport that holds to article text

.text
  display: flex
  align-items: center
  color: white
  padding: 20px
  background:
    color: rgba(black, 0.3)
    
@media (min-width: 660px)
  .text
    height: 100vh
    background:
      color: rgba(black, 0.1)
  
@media (min-width: 1100px)
  .text
    background: transparent
    padding: 20px 20px 0
 
// container for the nested grid inside of .text

.small-grid
  display: grid
  grid-column-template: 1fr 1fr
  
.text__headline
  // font-size: 2em
  h1
    font-weight: normal
    color: white
    text-shadow: 1px 1px rgba(#999, 0.3) // shadow on the text to help it stand out from the background
    
  @media (min-width: 850px)
    h1
      font-size: 4vw // this grows the text with the viewport size
    
.text__subheadline
  h2
    font-weight: normal
    color: white
    font-style: italic
    text-shadow: 1px 1px rgba(#999, 0.3)
    
  @media (min-width: 850px)
    h2
      font-size: 2vw
      
// sets the column structure of the article text

.text__columns
  columns: 2
  column-width: 300px // preserves a 300px column width. this will make sure the text goes to one column when the text is under 300px wide
  text-shadow: 1px 1px rgba(#999, 0.4)
  line-height: 1.2
  font-size: 1.2em
  
  p:first-child
    margin-top: 0 // removes margin from the first paragraph
  
@media (min-width: 660px)
  .text__columns
    font-size: 1.2em
  
@media (min-width: 900px)
  .text__columns
    font-size: 1em
  
@media (min-width: 1368px)
  .text__columns
    font-size: 1.1vw // scales the font size on large screens