/* _07-layout.css */

.layout {
  container-type: size;
  container-name: layout;

  width: 100vw;
  height: 100vh;
  margin: auto;
  max-width: calc(100vh * 16 / 9);
  max-height: calc(100vw * 9 / 16);

  background: var(--color-00-00); /* основной цвет фона */
  box-shadow: 0 0 3cqw var(--color-00-10);

  display: flex;
  flex-direction: row;
  justify-content: space-between; 
align-items: center;
   
overflow: hidden;
}

@container layout (min-width: 1px) {
 .section-11, .section-12, .section-13, .section-14 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center; /* по центру вертикально */
  width: 15.625cqw;
  height: 100%;
  /* border: 0px solid var(--color-00-100); */ /* для видимости границ */
  box-shadow: 0 0 6px 5px var(--color-00-60); /* для видимости границ */
  overflow: visible;
}
 .section-11 {
  container-type: size;
  container-name: section-11;
}
 .section-12 {
  container-type: size;
  container-name: section-12;
  width: 50cqw;
}
.section-13 {
  container-type: size;
  container-name: section-13;
  /* aspect-ratio: 3 / 12; */
  /* background-color: rgba(0, 0, 0, 0.10); /* немного затемнения для видимости */
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
}
.section-13::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}
 .section-14 {
  container-type: size;
  container-name: section-14;
}
}