Prototype Master

by mtenschert

HTML

<section _ngcontent-serverapp-c103="" class="main-container ng-tns-c103-6">
  <div _ngcontent-serverapp-c103="" class="main-container-bg ng-tns-c103-6">
  </div>
  
  <div _ngcontent-serverapp-c89="" class="container">
    <div _ngcontent-serverapp-c89="" class="product-wrapper">
      <div _ngcontent-serverapp-c89="" class="row gutter-10">
        <div _ngcontent-serverapp-c89="" class="col-12 col-md-6">
          <!---->
          <!---->
        </div>
        <div _ngcontent-serverapp-c89="" class="col-12 col-md-3 side-panel ng-star-inserted">
          <div _ngcontent-serverapp-c88="" class="pt-4 ng-tns-c88-7">
          </div>
        </div>
      </div>
    </div>
  </div>
  
    <div _ngcontent-serverapp-c89="" class="container">
    <div _ngcontent-serverapp-c89="" class="product-wrapper">
      <div _ngcontent-serverapp-c89="" class="row gutter-10">
        <div _ngcontent-serverapp-c89="" class="col-12 col-md-6">
          <!---->
          <!---->
        </div>
        <div _ngcontent-serverapp-c89="" class="col-12 col-md-3 side-panel ng-star-inserted">
          <div _ngcontent-serverapp-c88="" class="pt-4 ng-tns-c88-7">
          </div>
        </div>
      </div>
    </div>
  </div>
  
</section>

CSS

:root {
  --primary-text-color: #706f6f;
  --secondary-text-color: #f7f7f7;
  --third-text-color: #09505d;
  --fourth-text-color: #b83122;
  --fifteenth-text-color: #a31f16;
  --nineteenth-text-color: #f1d6d3;
  --primary-border-color: #706f6f;
  --secondary-border-color: #f7f7f7;
  --third-border-color: #b83122;
  --fourth-border-color: #09505d;
  --fifth-border-color: #f1d6d3;
  --tenth-border-color: #e5e5e5;
  --nineteenth-border-color: #a31f16;
  --primary-shadow-color: #000;
  --secondary-shadow-color: #f7f7f7;
  --third-shadow-color: #01010180;
  --primary-color: #b83122;
  --primary-color-with-opacity90: #b83122e6;
  --secondary-color: #09505d;
  --third-color: #a31f16;
  --fourth-color: #ffffff;
  --fifth-color: #e6edee;
  --sixth-color: #e5e5e5;
  --seventh-color: #f7f7f7;
  --ninth-color: #22b835;
  --tenth-color: #f1d6d3;
  --twelfth-color: #706f6f;
  --fortyseventh-color: #dfc342;
  --fortyeigth-color: #000;
  --primary-slate-color: #b83122;
  --secondary-slate-color: #bf4d28;
}

@media only screen and (max-width: 1209.98px) {
  .main-container .main-container-bg {
    background: var(--primary-color);
    background: radial-gradient(circle, var(--primary-slate-color) 0, var(--secondary-slate-color) 100%);
  }
}

.main-container .main-container-bg {
  height: 300px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: var(--primary-color);
  background: radial-gradient(circle, var(--primary-slate-color) 0, var(--secondary-slate-color) 100%);
  z-index: -1;
}

.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 1210px) .container,
.container-lg,
.container-md,
.container-sm {
  max-width: 
  px;
}

@media (min-width: 1210px) .container,
.container-md,
.container-sm {
  max-width: 1170px;
}

@media (min-width: 768px) .container,
.container-sm {
  max-width:...