.about {
  box-sizing: border-box;
  display: grid;
  height: 100vh;
  width: 100%;
  grid-template-rows: repeat(1fr, 4);
  grid-template-columns: repeat(1fr, 4);
  grid-template-areas:
    "b b b b"
    "b b b b"
    "c d d d"
    "f f f f";
}

.about .a {
  grid-area: a;
  background-color: #a2d6f9;
}

.about .b {
  grid-area: b;
  background-image: url("./../assets/images/bana2.avif");
  background-size: cover;
  background-position: 0px -200px;
}

.about .c {
  padding: 30px;
  display: grid;
  place-items: center;
  font-size: 30px;
  color: white;
  font-weight: 700;
  grid-area: c;
  background-color: var(--cokelat);
  writing-mode: vertical-lr;
}

.about .d {
  display: grid;
  grid-area: d;
  padding: 40px;
}
.about .d p {
  line-height: 40px;
  font-size: 20px;
  margin-bottom: 10px;
}
.about .f {
  grid-area: f;
  background-image: url("./../assets/images/chip2.jpg");
  background-size: cover;
  background-position: 0px -500px;
}

.about .g {
  grid-area: g;
  background-color: #072ac8;
}

@media screen and (max-width: 1200px) {
  .about {
    box-sizing: border-box;
    display: grid;
    height: 100vh;
    width: 100%;
    grid-template-rows: repeat(1fr, 4);
    grid-template-columns: repeat(1fr, 4);
    grid-template-areas:
      "c d d d"
      "c d d d"
      "c d d d"
      "c d d d";
  }
  .about .d {
    padding-top: 100px;
  }
}
