/**, *:before, *:after {
    box-sizing: border-box;
}*/

/*body {
    background: #eee;
    color: #191919;
    font-family: 'acmeregular', 'Lato', sans-serif;
}*/

/*h1, h2 {
    font-family: 'Fjalla One', sans-serif;
    margin-top: 0;
    text-transform: uppercase;
}*/

/*Added*/
.articlepadding > h2 {
    font-size: 30px;
    font-weight: 600;
}

figure {
    margin: 0;

}

.featureimg {
    height: auto;
    width: 100%;
    padding-top: 20px; /*Added*/
    padding-left: 20px; /*Added*/
    padding-right: 20px; /*Added*/
}

.wrapper {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 1fr 2fr;
    grid-auto-rows: minmax(100px, auto);
    max-width: 1000px;
    position: relative;
    font-family: 'robotoregular';
    background-color: #eee; 
}

    .wrapper > * {
        grid-column: 1 / span 2;
    }

.headerwrapper {
    font-size: 1.5em;
    grid-row: 1 / 2;
}

.headerwrapper:after {
    background: #6817ba;
    content: "";
    display: block;
    height: 20px;
    width: auto;
}

.article {
    /*text-align: right;*/ /**/
    text-align: left;
}

.articlepadding{
    padding-left: 20px;
    padding-right: 20px;

}
.featured-image-1 {
    grid-row: 2 / 3;
}

.number-1 {
    grid-row: 2 / 4;
}

.featured-image-2, .number-2 {
    grid-row: 4 / 5;
}

.number-1, .number-4 {
    align-self: flex-end;
    color: rgba(104,23,186,0.5);
    font-family: robotoregular, sans-serif, 'Fjalla One';
    font-size: 480px;
    line-height: 480px;
    grid-column: 1 / 2;
}

/*Added*/
.article-1 {
    grid-column: 1 / 3;
}
/*Added*/
.article-4 {
    grid-column: 2 / 3;
}

/*.article-1, .article-4 {
    grid-column: 2 / 3;
}*/

.featured-image-2, .number-2 {
    align-self: end;
}

.number-2 {
    color: #eee;
    font-size: 200px;
    justify-self: end;
    line-height: 160px;
}

.number-3 {
    background: black;
    border-radius: 130px;
    color: white;
    font-family: robotoregular, sans-serif, 'Fjalla One';
    font-size: 100px;
    height: 130px;
    line-height: 130px;
    position: absolute;
    grid-row: 6 / 7;
    right: -20px;
    text-align: center;
    top: -20px;
    width: 130px;
}

.featured-image-3 img {
    height: 100%;
}

.number-4 {
    font-size: 320px;
    left: -20px;
    line-height: 320px;
    position: absolute;
}


/*Added*/
.number-4 {
    grid-row: 9 / 10;
}

.featured-image-5 {
    grid-row: 10 / 11;
}

.article-5 {
    grid-row: 11 / 12;
}

.featured-image-6 {
    grid-row: 12 / 13;
}
.article-6 {
    grid-row: 13 / 14;
}

.number-5 {
    font-size: 120px;
    line-height: 120px;
    position: absolute;
    grid-row: 10 / 11;
}

.number-6 {
    font-size: 100px;
    line-height: 100px;
    position: absolute;
    grid-row: 12 / 13;
}


/*Changed from 600px*/
@media (min-width: 700px) {

    .wrapper {
        grid-template-columns: repeat(2, 1fr 2fr); /*4 cols*/
        /*margin: 124px auto;*/
        margin: 20px auto; /*Changed*/
    }
  
  .headerwrapper {
    grid-column: 3 / 5;
    width: 70%;
  }
  
  .featured-image-1 {
    grid-row: 1 / 3;
  }
  
  .article-1 {
    grid-row: 3 / 4;
  }
  
  .article-2 {
    grid-column: 4 / 5;
    grid-row: 4 / 5;
  }
  
  .featured-image-2, .number-2 {
    grid-column: 3 / 5;
    grid-row: 2 / 4;
  }

  .featured-image-3, .number-3 {
    grid-row: 4 / 6;
  }
  .featured-image-4, .number-4 {
    grid-column: 3 / 5;
    grid-row: 5 / 6;
  }
  
  .number-4 {
    font-size: 220px;
    grid-row: 5 / 7;
  }
  
  .article-3, .article-4 {
    grid-row: 6 / 7;
  }
  
  .article-4 {
    grid-column: 4 / 5;
  }

    /*Added*/
    .featured-image-5, .number-5 {
        grid-row: 7 / 9;
    }
    /*Added*/
    .number-5 {
        font-size: 220px;
        grid-row: 7 / 9;
    }

    /*Added*/
    .featured-image-6, .number-6 {
        grid-column: 3 / 5;
        grid-row: 7 / 11;
    }
    /*Added*/
    .number-6 {
        font-size: 120px;
        grid-column: 3 / 5;
        grid-row: 8;
    }


  /*Added*/
  .article-5, .article-6 {
      grid-row: 9 / 11;
  }
    .article-5 {
        grid-column: 1 / 3;
    }
  .article-6 {
      grid-column: 3 / 5;
  }
}

/*Iphone 11*/
@media screen and (min-width : 391px) and (max-width: 420px) {
    .article_text_size {
        font-size: 1.8rem;
    }
    .onethirdsize > p {
        font-size: 1.8rem;
    }

    .twothirdsize > p {
        font-size: 1.8rem;
    }

    .twelvesize > p {
        font-size: 1.8rem;
    }
}

/*Iphpone 12  390 Galaxy S10 360*/
@media screen and (min-width : 360px) and (max-width: 390px) {
    .article_text_size {
        font-size: 1.8rem;
    }
    .onethirdsize > p {
        font-size: 1.8rem;
    }

    .twothirdsize > p {
        font-size: 1.8rem;
    }

    .twelvesize > p {
        font-size: 1.8rem;
    }
}

/*Iphone SE IPhone5 320 */
@media screen and (min-width : 321px) and (max-width: 359px) {

}


 /*Iphpone 5 */
 @media screen and (max-width: 320px) {

 }

/*For Ipad air or similar etc in portrait*/
@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : portrait) {
    .article_text_size {
        font-size: 2rem;
    }
    .onethirdsize > p {
       font-size: 2rem;
    }
    .twothirdsize > p {
        font-size: 2rem;
    }
    .twelvesize > p {
        font-size: 2rem;
    }
}