/* ------------------------------------------------
   Wrapper & page background (Pastel style)
--------------------------------------------------*/
.rt-wrapper {
  width: 100%;
  padding-bottom: 50px;
  box-sizing: border-box;
}

/* ------------------------------------------------
   Header (logo, share, title, form)
--------------------------------------------------*/
.rt-header {
  width: 100%;
  padding: 75px 80px;
  position: relative;
  box-sizing: border-box;
}

/* ------------------------------------------------
   Form controls
--------------------------------------------------*/
.rt-form {
  display: inline-flex;
  align-items: center;
}
.form-control {
  height: 45px;
  padding: 10px 15px;
  font-size: 16.875px;
  border: 1px solid transparent;
  border-radius: 3px;
  box-shadow: 0 5px 5px rgba(179,48,87,0.3);
  outline: none;
  margin-right: 10px;
}
.form-control:focus {
  border-color: #ef5558;
}
.btn {
  height: 45px;
  padding: 0 20px;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  background: #b43158;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}
/* ------------------------------------------------
   Container scrollable in both directions
--------------------------------------------------*/
.demo-scrollbox {
  overflow: auto;
  padding-bottom: 20px;
}

/* ------------------------------------------------
   Grid for first two on top, desktop full‐width below
--------------------------------------------------*/
.demo {
  display: grid;
  grid-template-columns: auto auto;
  grid-auto-rows: auto;
  gap: 1em;
}

/* Place each <label> in its grid cell */
.demo label:nth-child(1) { /* mobile */
  grid-column: 1; grid-row: 1;
}
.demo label:nth-child(2) { /* tablet */
  grid-column: 2; grid-row: 1;
}
.demo label:nth-child(3) { /* desktop */
  grid-column: 1 / span 2;
  grid-row: 2;
}

/* ------------------------------------------------
   Fixed sizes for each frame
   (pre-calculated so no aspect‐ratio math)
--------------------------------------------------*/
.demo-frame {
  background: #ffe2e3;
  border-radius: 4px;
  box-shadow: 0 5px 5px rgba(179,48,87,0.2);
  overflow: hidden;
}

/* Mobile: 360×640 scaled so height = 200px */
.demo-frame.mobile {
  width: 112.5px;  /* 200px * (360/640) */
  height: 200px;
}

/* Tablet: 1024×768 scaled so height = 250px */
.demo-frame.tablet {
  width: 333.33px; /* 250px * (1024/768) */
  height: 250px;
}

/* Desktop: 1280×800 scaled so height = 300px */
.demo-frame.desktop {
  width: 480px;    /* 300px * (1280/800) */
  height: 300px;
}

/* Make the iframe fill its box */
.demo-frame iframe {
  width: 100%;
  height: 100%;
  border: none;
}