h2 {
  margin-top: 20vh;
  margin-right: 2rem;
  font-size: 3rem;
}

main {
  flex-direction: column;
  align-items: center;

  font-size: 1rem;
}

.grid {
  width: 80rem;
  display: grid;
  margin: 5rem auto;
  --square-side: calc((80rem - 3rem) / 4);
  grid-template-columns: repeat(4, var(--square-side));
  grid-template-rows: repeat(6, var(--square-side));

  grid-gap: 1rem;
  align-items: stretch;

  grid-template-areas:
    "c-title c-text-1 c-project c-text-2"
    ". cm-project c-project ."
    "cm-title cm-project . cm-text-1"
    ". cm-text-2 cm-text-3 ."
    "as-title . as-text-1 as-project"
    ". as-text-2 as-text-3 as-project";
}
.dummy {
  display: none;
}
.grid h3 {
  margin: 0;
  font-size: 1.8rem;
  font-weight: 300;
  text-transform: uppercase;
  text-align: center;
}
.grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.service-title {
  display: flex;
  justify-content: center;
  align-items: center;
}
.service-description {
  padding: 1rem;
  overflow: hidden;
}
#c-title {
  grid-area: c-title;
  background-color: rgba(58,134,158,1);
}
#c-text-1 {
  grid-area: c-text-1;
  color: white;
  background-color: rgba(58,134,158,.7);
}
#c-text-2 {
  grid-area: c-text-2;
  color: white;
  background-color: rgba(58,134,158,.7);
}
#c-project {
  grid-area: c-project;
}
#c-project img {
  grid-area: c-project;
  object-position: right;
}
#cm-title {
  grid-area: cm-title;
  background-color: rgba(255,153,0,1);
}
#cm-text-1 {
  grid-area: cm-text-1;
  color: #555;
  background-color: rgba(255,153,0,.65);
}
#cm-text-2 {
  grid-area: cm-text-2;
  color: #555;
  background-color: rgba(255,153,0,.65);
}
#cm-text-3 {
  grid-area: cm-text-3;
  color: #555;
  background-color: rgba(255,153,0,.65);
}
#cm-project {
  grid-area: cm-project;
}
#as-project {
  grid-area: as-project;
}
#as-title {
  grid-area: as-title;
  background-color: rgba(38,41,50,1);
}
#as-text-1 {
  grid-area: as-text-1;
  color: white;
  background-color: rgba(38,41,50,.6);
}
#as-text-2 {
  grid-area: as-text-2;
  color: white;
  background-color: rgba(38,41,50,.6);
}
#as-text-3 {
  grid-area: as-text-3;
  color: white;
  background-color: rgba(38,41,50,.6);
}
.service-title {
  color: white;
}
.image {
  position: relative;
}
.image span {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  color: white;
  padding: .2rem;
}

/* desktop */
@media screen and (min-width: 1200px) {
}

/* tablet */
@media screen and (min-width: 750px) and (max-width: 1400px) {
  .grid {
    --square-side-tablet: 20rem;

    width: calc(2 * var(--square-side-tablet) + 1rem);
    display: grid;
    margin: 5rem auto;
    grid-template-columns: repeat(2, var(--square-side-tablet));
    grid-template-rows: repeat(9, var(--square-side-tablet));

    grid-template-areas:
      "c-title c-text-1"
      "c-project c-text-2"
      "c-project ."
      "cm-title cm-text-1"
      "cm-text-2 cm-project"
      "cm-text-3 cm-project"
      "as-title as-text-1"
      "as-project as-text-2"
      "as-project as-text-3";
  }
}

/* mobile */
@media screen and (max-width: 750px) {
  .grid {
    --square-side-mobile: calc(100vw - 2rem);

    width: 100%;
    padding: 1rem;
    font-size: 5vw;
    grid-template-columns: repeat(1, 100%);
    grid-template-rows: repeat(14, var(--square-side-mobile));

    grid-template-areas:
      "c-title"
      "c-text-1"
      "c-text-2"
      "c-project"
      "cm-title"
      "cm-text-1"
      "cm-text-2"
      "cm-text-3"
      "cm-project"
      "as-title"
      "as-text-1"
      "as-text-2"
      "as-text-3"
      "as-project";
  }
  .grid h3 {
    font-size: 9vw;
  }
}