.l-grid {
  width: 100%;
  max-width: var(--layout--page-width);
  grid-column-gap: var(--layout--s7);
  grid-row-gap: var(--layout--s0);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.l-grid__block--center {
  align-self: center;
}

.l-grid__block--end {
  align-self: end;
}

.l-grid__block--middle {
  justify-self: center;
}

.l-grid__block--right {
  justify-self: end;
}

.l-grid__block--overlay {
  justify-self: center;
  z-index: 10;
}

.l-grid__block--card {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
}

.l-grid__block--dark-turquoise {
  background-color: var(--color--dark-turquoise);
}

.l-grid__block--brown {
  background-color: var(--color--brown);
}

.l-grid__block--divider {
  border-bottom: var(--layout--border-width) solid var(--color--light-yellow);
  height: var(--layout--border-width);
}

.l-grid__block--span-4 {
  grid-area: span 1 / span 4 / span 1 / span 4;
}

.l-grid__block--span-6 {
  grid-area: span 1 / span 6 / span 1 / span 6;
}

.l-grid__block--1-8 {
  grid-area: 1 / 1 / 2 / 9;
}

.l-grid__block--1-12 {
  grid-area: 1 / 1 / 2 / 13;
}

.l-grid__block--2-4 {
  grid-area: 1 / 2 / 2 / 5;
}

.l-grid__block--2-5 {
  grid-area: 1 / 2 / 2 / 6;
}

.l-grid__block--2-6 {
  grid-area: 1 / 2 / 2 / 7;
}

.l-grid__block--2-7,
.l-grid__block--2-1 {
  grid-area: 1 / 2 / 2 / 8;
}

.l-grid__block--2-11 {
  grid-area: 1 / 2 / 2 / 12;
}

.l-grid__block--3-6 {
  grid-area: 1 / 3 / 2 / 7;
}

.l-grid__block--3-10 {
  grid-area: 1 / 3 / 2 / 11;
}

.l-grid__block--4-9 {
  grid-area: 1 / 4 / 2 / 10;
}

.l-grid__block--5-7 {
  grid-area: 1 / 5 / 2 / 8;
}

.l-grid__block--5-9 {
  grid-area: 1 / 5 / 2 / 10;
}

.l-grid__block--6-10 {
  grid-area: 1 / 6 / 2 / 11;
}

.l-grid__block--6-11 {
  grid-area: 1 / 6 / 2 / 12;
}

.l-grid__block--7-10 {
  grid-area: 1 / 7 / 2 / 11;
}

.l-grid__block--7-11 {
  grid-area: 1 / 7 / 2 / 12;
}

.l-grid__block--7-12 {
  grid-area: 1 / 7 / 2 / 13;
}

.l-grid__block--8-10 {
  grid-area: 1 / 8 / 2 / 11;
}

.l-grid__block--8-11 {
  grid-area: 1 / 8 / 2 / 12;
}

.l-grid__block--9-12 {
  grid-area: 1 / 9 / 2 / 13;
}


@media screen and (max-width: 767px) {
  .l-grid {
    display: block;
  }
}