* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  font-family: "Yrsa", serif;
  line-height: 1.6;
  font-size: 18px;
}

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

#app {
  font-family: "Yrsa", serif;
  min-height: 100dvh;
  background-color: #e4e72c;
  overflow: hidden;
  padding: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
#app main {
  width: 100%;
  background-color: #eee;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
  gap: 20px;
  padding: 30px 10px 10px 10px;
  position: relative;
  overflow: hidden;
}
#app main:before {
  position: absolute;
  top: 0;
  left: 0;
  font-family: monospace;
  background-color: rgba(0, 0, 0, 0.15);
  padding: 3px 10px;
  color: #ac4b06;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: lowercase;
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
  border-right: 1px solid rgba(0, 0, 0, 0.4);
  content: "<main>";
}
#app main section {
  position: relative;
  border: 1px solid #313131;
  padding: 30px 10px 10px 10px;
}
#app main section:before {
  position: absolute;
  top: 0;
  left: 0;
  font-family: monospace;
  background-color: rgba(0, 0, 0, 0.15);
  padding: 3px 10px;
  color: #ac4b06;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: lowercase;
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
  border-right: 1px solid rgba(0, 0, 0, 0.4);
  content: "<section>";
}
#app main aside {
  position: relative;
  border: 1px solid #313131;
  padding: 30px 10px 10px 10px;
  display: -ms-grid;
  display: grid;
  gap: 20px;
}
#app main aside:before {
  position: absolute;
  top: 0;
  left: 0;
  font-family: monospace;
  background-color: rgba(0, 0, 0, 0.15);
  padding: 3px 10px;
  color: #ac4b06;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: lowercase;
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
  border-right: 1px solid rgba(0, 0, 0, 0.4);
  content: "<aside>";
}
#app main .grid {
  display: -ms-grid;
  display: grid;
  gap: 20px;
  position: relative;
  padding: 30px 10px 10px 10px;
  border: 1px solid #313131;
}
#app main .grid:before {
  position: absolute;
  top: 0;
  left: 0;
  font-family: monospace;
  background-color: rgba(0, 0, 0, 0.15);
  padding: 3px 10px;
  color: #ac4b06;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: lowercase;
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
  border-right: 1px solid rgba(0, 0, 0, 0.4);
}
#app main .grid[columns="1"] {
  -ms-grid-columns: (1fr)[1];
  grid-template-columns: repeat(1, 1fr);
}
#app main .grid[columns="1"]:before {
  content: "<.grid-1>";
}
#app main .grid[columns="2"] {
  -ms-grid-columns: (1fr)[2];
  grid-template-columns: repeat(2, 1fr);
}
#app main .grid[columns="2"]:before {
  content: "<.grid-2>";
}
#app main .grid[columns="3"] {
  -ms-grid-columns: (1fr)[3];
  grid-template-columns: repeat(3, 1fr);
}
#app main .grid[columns="3"]:before {
  content: "<.grid-3>";
}
#app main .grid .box {
  position: relative;
  min-height: 200px;
  border: 1px solid #313131;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 1.25em;
  letter-spacing: 0.5em;
  text-transform: uppercase;
}
#app main .grid .box:before {
  position: absolute;
  top: 0;
  left: 0;
  font-family: monospace;
  background-color: rgba(0, 0, 0, 0.15);
  padding: 3px 10px;
  color: #ac4b06;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: lowercase;
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
  border-right: 1px solid rgba(0, 0, 0, 0.4);
  content: "<.box>";
}

.grid {
  display: -ms-grid;
  display: grid;
  gap: var(--gap);
}
.grid[columns="3"] {
  -ms-grid-columns: (1fr)[3];
  grid-template-columns: repeat(3, 1fr);
}
.grid[columns="2"] {
  -ms-grid-columns: (1fr)[2];
  grid-template-columns: repeat(2, 1fr);
}
.grid[columns="2"] {
  -ms-grid-columns: (1fr)[1];
  grid-template-columns: repeat(1, 1fr);
}

@media (max-width: 940px) {
  #app[example-number="2"] .grid[columns="3"],
  #app[example-number="3"] .grid[columns="3"] {
    -ms-grid-columns: (1fr)[2];
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 700px) {
  #app[example-number="2"] .grid[columns="2"],
  #app[example-number="3"] .grid[columns="2"] {
    -ms-grid-columns: (1fr)[1] !important;
    grid-template-columns: repeat(1, 1fr) !important;
  }
}
@media (max-width: 620px) {
  #app[example-number="2"] .grid[columns="3"],
  #app[example-number="3"] .grid[columns="3"] {
    -ms-grid-columns: (1fr)[1];
    grid-template-columns: repeat(1, 1fr);
  }
}

#app[example-number="3"] main {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 6fr 3fr;
  grid-template-columns: 6fr 3fr;
  -webkit-box-align: self-start;
      -ms-flex-align: self-start;
          align-items: self-start;
}
#app[example-number="3"] section:before {
  content: "<.content>";
}
#app[example-number="3"] section .box {
  min-height: 16em;
}
#app[example-number="3"] aside:before {
  content: "<.ads>";
}

#app[example-number="4"] main {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 6fr 3fr;
  grid-template-columns: 6fr 3fr;
  -webkit-box-align: self-start;
      -ms-flex-align: self-start;
          align-items: self-start;
}
@media (max-width: 580px) {
  #app[example-number="4"] main {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
  #app[example-number="4"] main section {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
  #app[example-number="4"] main aside {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
}
#app[example-number="4"] section:before {
  content: "<.content>";
}
#app[example-number="4"] section .box {
  min-height: 16em;
}
#app[example-number="4"] section {
  container-type: inline-size;
}
#app[example-number="4"] section:before {
  content: "<.content>";
}
@container (max-width: 560px) {
  #app[example-number="4"] section .grid[columns="2"] {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}
@container (max-width: 600px) {
  #app[example-number="4"] section .grid[columns="3"] {
    -ms-grid-columns: (1fr)[2];
    grid-template-columns: repeat(2, 1fr);
  }
}
@container (max-width: 400px) {
  #app[example-number="4"] section .grid[columns="3"] {
    -ms-grid-columns: (1fr)[1];
    grid-template-columns: repeat(1, 1fr);
  }
}
#app[example-number="4"] aside {
  container-type: inline-size;
}
#app[example-number="4"] aside:before {
  content: "<.ads>";
}
@container (max-width: 340px) {
  #app[example-number="4"] aside .grid[columns="2"] {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}

section {
  container-type: inline-size;
  container-name: section-container;
}
section:before {
  content: "<.content>";
}
@container section-container (max-width: 560px) {
  section .grid[columns="2"] {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}
@container section-container (max-width: 600px) {
  section .grid[columns="3"] {
    -ms-grid-columns: (1fr)[2];
    grid-template-columns: repeat(2, 1fr);
  }
}
@container section-container (max-width: 400px) {
  section .grid[columns="3"] {
    -ms-grid-columns: (1fr)[1];
    grid-template-columns: repeat(1, 1fr);
  }
}