header.header
  h1.header__title CSS @container (resize window)

main.layout
  .layout-wrapper
    .layout__top(data-width='')
      .data Superior >700
        span
    .layout__left(data-width='')
      .data Izquierda <250
        span
    .layout__right(data-width='')
      .data Derecha >500
        span

footer.footer
  h2.footer__title Los colores de fondo cambian de colores, según:
  ul.footer__list
    li.footer__list-item Principal: cuando su ancho sea superior a 700px
    li.footer__list-item IZQUIERDA: cuando su ancho sea superior a 250px
    li.footer__list-item DERECHA: cuando su ancho sea superior a 500px
  h2.footer__title Existen tres @container definidos 
  ul.footer__list
    li Uno que contiene las 3 capas 
    li Los otros dos están dentro del @container principal, y son los que están abajo, en la misma fila
  img(src="https://raw.githubusercontent.com/ivanalbizu/nested-css-container/main/src/img/container.png", alt="")
View Compiled 
@mixin reset-list() {
  padding: 0;
  margin: 0;
  list-style: none;
}

@mixin unordered-list-bullet($margin-left: 0, $font-size: 18px) {
  @include reset-list();
  margin-left: $margin-left;
  margin-block-start: 0;
  margin-block-end: 0;
  padding-inline-start: 0;
  li {
      padding-left: .6em;
      position: relative;
      font-size: $font-size;
      &::before {
          content: '·';
          width: .6em;
          display: inline-block;
          position: absolute;
          left: 0;
      }
  }
}

:root {
  --color-0: #2c2c2c;
  --color-1: #D9594C;
  --color-2: #B7B868;
  --color-3: #CE8D66;
  --color-4: #b1b1b1;
}

* {
  margin: 0;
  padding: 0;
  &,
  &::before,
  &::after {
    box-sizing: border-box;
  }
}

body {
  font-family: "Barlow", sans-serif;
  font-size: 1.3rem;
  font-weight: 300;
  line-height: 1.45;
  color: var(--color-0);
  background-color: var(--color-4);
}
h1,
h2,
h3,
h4,
p {
  font-size: unset;
  font-weight: unset;
  margin-block-start: 0;
  margin-block-end: 0;
}
img {
  max-width: 100%;
  display: block;
  margin: auto;
}

.header {
  &__title {
    font-size: clamp(1.6rem, 4vw, 3rem);
    line-height: 1.1;
    text-align: center;
    padding-bottom: 2rem;
  }
}
.footer {
  padding: 1rem .7rem;
  &__title {
    padding-bottom: .7rem;
  }
  &__list {
    @include unordered-list-bullet(10px, 16px);
    padding-bottom: .7rem;
  }
}

.layout {
  //contain: layout inline-size style;
  container-type: inline-size;
  &-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    text-align: center;
    > * {
      box-shadow: 0 0 2px #fff;
    }
    //place-items: center; //esto rompe el sistema @container
  }
  &__top {
    grid-column: 1 / -1;
  }
  &__left {
    //contain: layout inline-size style;
    container-type: inline-size;
  }
  &__right {
    //contain: layout inline-size style;
    container-type: inline-size;
  }
  .data {
    padding: .6rem;
  }
  span {
    font-weight: 500;
    display: block;
  }

}



@container (min-width: 700px) {
  .layout {
    &__top {
      background-color: var(--color-1);
    }
  }
}
@container (max-width: 250px) {
  .layout {
    &__left {
      div {
        background-color: var(--color-2);
      }
    }
  }
}
@container (min-width: 500px) {
  .layout {
    &__right {
      div {
        background-color: var(--color-3);
      }
    }
  }
}
View Compiled 
const els = document.querySelectorAll('[data-width]')

const resizeHandler = () => {
  els.forEach(el => {
    const width = el.getBoundingClientRect().width
    const span = el.querySelector('span')
    span.innerHTML = `${parseInt(width)} px`
  })
}

window.addEventListener('load', resizeHandler)
window.addEventListener('resize', resizeHandler)

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.