@import url('https://rsms.me/inter/inter.css');

*,
*::before,
*::after {
  box-sizing: inherit;
}

html {
  position: relative;
  font-family: 'Inter', sans-serif;
  box-sizing: border-box;
  min-height: 100vh;
}

@supports (font-variation-settings: normal) {
  html {
    font-family: 'Inter var', sans-serif;
  }
}

html{
  margin: 0;
  padding: 40px 0;
  color: #fff;
  background: #7b4397;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.4'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"), linear-gradient(to top, #dc2430, #7b4397);
  box-sizing: border-box;
}

main {
  margin: 0 auto;
  padding: 0 20px;
  max-width: 1024px;
}

section {
  margin-bottom: 40px;
}

article {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  font-weight: 700;
  font-feature-settings: 'ss01' 1;
  color: #212121;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.3);
  border-radius: 4px;
  background: #FDC830;
  background: linear-gradient(to top, #F37335, #FDC830);
}

/* Example 1 */
.articles.ex1 {
  display: grid;
  grid-template-columns: 5fr 5fr 4fr;
  grid-template-rows: repeat(6, 60px);
  grid-gap: 1rem;
}

.articles.ex1 article {
  grid-column: span 1;
  grid-row: span 3;
}

.articles.ex1 article:nth-child(3) { grid-row: span 1; }
.articles.ex1 article:nth-child(4) { grid-row: span 2; }
.articles.ex1 article:nth-child(5) { grid-column: span 2; }

/* Example 2 */
.articles.ex2 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: repeat(13, 60px);
  list-style: none;
}

.articles.ex2 article:nth-child(1) {
  grid-column: 1 / span 2;
  grid-row: 1 / span 3;
}
.articles.ex2 article:nth-child(2) {
  grid-column: 2 / span 2;
  grid-row: 3 / span 3;
}
.articles.ex2 article:nth-child(3) {
  grid-column: 1 / span 2;
  grid-row: 5 / span 3;
}
.articles.ex2 article:nth-child(4) {
  grid-column: 2 / span 2;
  grid-row: 7 / span 3;
}
.articles.ex2 article:nth-child(5) {
  grid-column: 1 / span 2;
  grid-row: 9 / span 3;
}
.articles.ex2 article:nth-child(6) {
  grid-column: 2 / span 2;
  grid-row: 11 / span 3;
}

/* Example 3 */
.articles.ex3 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(3, 160px);
}

.articles.ex3 article {
  grid-column: span 1;
  grid-row: span 1;
}

.articles.ex3 article:nth-child(2) { grid-column: 3; }
.articles.ex3 article:nth-child(3) { grid-column: 5; }
.articles.ex3 article:nth-child(4) { grid-column: 2; }
.articles.ex3 article:nth-child(5) { grid-column: 4; }
.articles.ex3 article:nth-child(6) { grid-column: 3; }

/* Example 4 */
.articles.ex4 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-gap: 2rem 1rem;
}

.articles.ex4 article { height: 160px; }