/* Oculta a barra de rolagem horizontal */
/* body {  */
/*    overflow-x: hidden;  */
/*}  */

/* ########## */

.layout-2{
    border: 8px solid #cf4404;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* 4 colunas iguais. Você trocar pelo método repeat(). Nesse caso, repeat(4, 1fr)  */
    grid-template-rows: 1fr 2fr; /* define 2 linhas, a segunda ocupando o dobro do espaço da primeira */
    padding: 10px; /* define um espaçamento interno de 10px nas bordas do elemento */
    gap: 10px; /* define um espaço de 10px entre os elementos */
  }
  .layout-2 > .item{
    text-align: center; /* alinha o texto interno ao centro */
    padding: 10px;
    font-weight: normal;
    background-color: #ed753e;
  }
  .layout-2 > .item-1{
    grid-column-start: 1;/* elemento começa no início da coluna 1  */
    grid-column-end: span 3; /* elemento preenche 4 colunas */
    grid-row-start: auto;/* posicionamento automático nas linhas */
    grid-row-end: auto; /* elemento preenche 2 colunas */
    background-color: #de771d;
  }