body {
  margin: 0;
  padding: 0;
  font-size: 780px;
}

.frame {
  background-color: #f4eddd;
  overflow: hidden;
  width: 100%;
  min-width: 360px;
  /* min-height: 3830px; */
  display: flex;
  flex-direction: column; 
  overflow: hidden;
  justify-content: center; 
  align-items: center; 
}

.B1 {
  display: flex;
  width: 100%;
}

.frame .element {
  width: auto;
  height: 1em;
  /* min-height: 740px; */
  flex-shrink: 0;
  min-width: max-content;
}

.B1R {
  height: calc(1em - 1px);
  flex-grow: 1; /* Растягивается и заполняет пустоту слева и справа */
  background-color: #2c1331;
}

.B1L {
  height: calc(1em - 1px);
  flex-grow: 1; /* Растягивается и заполняет пустоту слева и справа */
  background-color: #2c1331;
}

.frame .B2img {
  margin-top: 30px;
  width: auto;
  height: 1em;
  min-height: 740px;

  min-width: max-content;
}

.frame .B3img {
  margin-top: 30px;
  margin-left: 23px;
  width: auto;
  height: 0.65em;
  min-height: 480px;

  min-width: max-content;
}

.frame .B4img {
  margin-top: 10px;
  width: auto;
  height: 1.1em;
  min-height: 760px; 
  max-width: 1550px;
  object-fit: cover;
  transform: translateX(10px);
  
  /* min-width: max-content; */
}

.frame .B5img {
  margin-top: 30px;
  width: auto;
  height: 0.45em;
  min-height: 310px;

  min-width: max-content;
}

.frame .B6img {
  margin-top: 30px;
  width: auto;
  height: 0.8em;
  min-height: 545px;
  object-fit: cover;

  /* min-width: max-content; */
}

.frame .B7img {
  margin-top: 30px;
  width: auto;
  height: 0.07em;
  min-height: 50px;
  margin-bottom: 40px;
 
  min-width: max-content;
}


@media (576px <= width <= 768px) {
  body {
    font-size: 920px;
  }
}

@media (768px <= width <= 992px) {
  body {
    font-size: 1080px;
  }

  .frame .element {
    transform: translateY(-20px);
  }

  .B1L {
    height: calc(1em - 22px);
  }

  .B1R {
    height: calc(1em - 22px);
  }
}

@media (992px <= width <= 1200px) {
  body {
    font-size: 1150px;
  }

  .frame .element {
    transform: translateY(-20px);
  }

  .B1L {
    height: calc(1em - 22px);
  }

  .B1R {
    height: calc(1em - 22px);
  }
}

@media (1200px <= width <= 1400px) {
  body {
    font-size: 1220px;
  }

  .frame .element {
    transform: translateY(-20px);
  }

  .B1L {
    height: calc(1em - 22px);
  }

  .B1R {
    height: calc(1em - 22px);
  }
}

@media (1400px <= width) {
  body {
    font-size: 1380px;
  }

  .frame .element {
    transform: translateY(-20px);
  }

  .B1L {
    height: calc(1em - 22px);
  }

  .B1R {
    height: calc(1em - 22px);
  }
}