/*GRID KESAKOdesign*/
#kesako{
    background-color: var(--clr-lighter);
  }
  #b1, #b2, #b3{
    background-color: var(--clr-white);
  }
  
  
  .grid-def{
      grid-template-areas: "b1 b2"
                         "b1 b3";
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows:repeat(2, 1fr);
      gap:1.75rem;
  }
  .grid-def > div{
      background-color: white;
      border-radius: 8px;
      padding:3rem;
      width: 100%;
      border: 1px solid rgba(50, 50, 50, 0.1);
      box-shadow: 0px 1px 3px rgba(189, 151, 97, 0.44);
      background-color: #fefefe;
      color: #555555;
  }

  .grid-def > * > * {
    display: flex;
  flex-direction: column;
  justify-content: center;
  }
  .grid-def > * > *:nth-child(2){
  padding:1rem 2rem 2rem 2rem;
  font-size: 1.33rem;
  }
  .grid-def h3{
      font-size: 3rem;
      color: var(--clr-primary);
  }
  .grid-def p{
      font-size: 1.22rem;
      color: var(--clr-neutral);
      line-height: 1.44rem;
  }
  #b1{
      padding:0 0 0 0;
      grid-area: b1;
      display:grid;
      grid-template-areas:"b1img"
                          "b1txt";
      grid-template-columns: repeat(1, 1fr);
  }
  #b1 img{
      grid-area: b1img;
      height:100%;
      width: 100%;
      object-fit:cover;
      aspect-ratio: 16 / 9;
  }
  
  #b1 > div{
      grid-area: b1txt;
  }

  #b2{
      padding:0 0 0 0;
      grid-area: b2;
      display:grid;
      grid-template-areas:"b2img b2txt b2txt";
      grid-template-columns: repeat(3, 1fr);
  }
  #b2 img{
      grid-area: b2img;
      height:100%;
      object-fit:cover;
  }
  #b2 > div{
      grid-area: b2txt;
  }
  #b3{
      padding:0 0 0 0;
      grid-area: b3;
      display:grid;
      grid-template-areas:"b3img b3txt b3txt";
      grid-template-columns: repeat(3, 1fr);
  }
  #b3 img{
      grid-area: b3img;
      height:100%;
      object-fit:cover;
  }
  #b3 > div{
      grid-area: b3txt;
  }
  
  @media (max-width:768px){
      .grid-def{
      grid-template-areas: "b1"
                         "b2"
                          "b3";
      grid-template-columns: repeat(1, 1fr);
      grid-template-rows:repeat(3, 1fr);
      gap:1.75rem;
  }
      #b1{
          grid-template-areas:"b1img"
                              "b1txt";
          grid-template-columns: repeat(1, 1fr);
      }
      #b1 img{
          height:auto;
          aspect-ratio: 16 / 9;
      }
      #b2{
          grid-template-areas:"b2img"
                              "b2txt";
          grid-template-columns: repeat(1, 1fr);
      }
      #b2 img{
          width:100%;
          height:auto;
          aspect-ratio: 16 / 9;
      }
      #b2 h3{
          text-align:center;
      }
      #b3{
          grid-template-areas:"b3img"
                              "b3txt";
          grid-template-columns: repeat(1, 1fr);
      }
      #b3 img{
          width:100%;
          height:auto;
          aspect-ratio: 16 / 9;
      }
      #b3 h3{
          text-align:center;
      }
  }