.bento-container {
  --max-width: 1600px;
  --padding-inline: var(--padding-lg);
  container-type: inline-size;
  container-name: bento;
  width: min(100% - var(--padding-inline), var(--max-width));
  margin-inline: auto;
}

bento-grid {
  & * {
    box-sizing: border-box;
    margin-bottom: unset;
  }

  display: grid;
  gap: var(--gutter);
  grid-template-rows: auto;

  & > * {
    display: grid;
    gap: var(--gutter);
  }

  & > :nth-child(1),
  & > :nth-child(3) {
    --min: 20rem;
  }

  & > :nth-child(2) {
    grid-row: 1;
  }
}

@container bento (min-width: 800px) {
  bento-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min)), 1fr));

    & > :nth-child(2) {
      grid-column: 1 / -1;
    }

    & > :nth-child(1),
    & > :nth-child(3) {
      grid-template-columns: repeat(
        auto-fit,
        minmax(Min(100%, var(--min)), 1fr)
      );
      grid-column: 1 / -1;
    }
  }
}

@container bento (min-width: 1024px) {
  bento-grid {
    & > :nth-child(1),
    & > :nth-child(3) {
      --min: 25rem;
    }

    & > :nth-child(1),
    & > :nth-child(2) {
      grid-column: unset;
    }

    & > :nth-child(1) {
      grid-template-columns: unset;
    }
  }
}

@container bento (min-width: 1264px) {
  bento-grid {
    & > :nth-child(3) {
      grid-template-columns: unset;
      grid-column: unset;
    }

    & > :nth-child(2) {
      grid-column: 2;
      grid-row: unset;
    }
  }
}

@container bento (min-width: 1380px) {
  bento-grid {
    grid-template-columns: 1fr 2fr 1fr;
  }
}

.c-col--100 {
  & .bento-container {
    --padding-inline: 0;
  }
  & .container {
    width: 100%;
  }
}