body {
  margin: 40px;
}

.wrapper {
    display: flex;
  flex-direction: column;
  min-height: 100vh;
  column-gap: 2rem;
  row-gap: 1rem;
}

@media (min-width: 768px) {
  .wrapper {
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    grid-template-rows: auto 1fr auto;
    column-gap: 1rem;
    row-gap: 1rem;

  }
}

    .box {
        background-color: #6f6f59;
        color: #fff;
        border-radius: 5px;
        padding: 20px;
        font-size: 150%;

    }

.box  iframe{
  width: 100%;
  height: 700px;
  
}

.box h2 {
  color:white;
}

  .a {
        grid-column: 1/6;
        grid-row: 1 ;
    }
    .b {
        grid-column: 6/8;
        grid-row: 1;
    }
    .c {
        grid-column: 1/8 ;
        grid-row: 2;
   
}

.c iframe{
  height: 300px;
}