jam-cloud/jam-ui/src/assets/scss/custom/_landing.scss

.content-row.landing-page {
  display: flex;
  justify-content: space-between;
}

.landing-page {
  /* Approximate 1-inch margin using rem */
  .container {
    max-width: 100%;
    padding: 0 0 0 0;
  }

  .background {
    padding: 0 2.54rem; /* 1-inch padding inside */
  }

  /* Header section */
  .header {
    height: 2.54rem; /* 1 inch */
    background-color: white; /* Dark background */
    color: black;
    display: flex;
    align-items: center; /* Vertically center logo */
    padding-left: 2.54rem; /* 1-inch left margin */
  }

  .logo {
    font-size: 1.5rem; /* Mock logo text */
    font-weight: bold;
  }

  h1 {
    font-weight: 700;
    margin-top: 1.5rem;
    font-size: 1.5rem;
    color: rgb(54, 64, 79);
    margin-bottom: 1.5rem;
  }

  p {
    color: rgb(97, 110, 128);
    line-height: 1.25rem;
  }

  h2 {
    text-align:center;
    font-weight: 700;
    font-size: 1.25rem;
    color: rgb(54, 64, 79);
    margin-bottom: 1.5rem;
    margin-top: 2.0rem;
  }

  h3 {
    font-weight: 700;
    font-size: 1.25rem;
    color: #5d6f82;
  }

  .top-title {
    text-align:center;
  }
  .left-column {
    flex: 0 0 100%;
    padding-right: 15rem;
    padding-left: 15rem;
    display: grid;
  }

  .top-region-container {
    display: grid;
    grid-template-columns: 60% 40%;
    gap: 3rem; /* Adds spacing between them */
  }



  .preview-region {

      /* Make it respect the height of the parent */
      max-height: 100%; /* Ensures it doesn't exceed parent height */
      overflow: auto; /* Enables scrolling if content overflows */

    h2 {
      font-size:1.25rem;
      margin-top:0;
      margin-bottom:0;
      text-align:left;
    }
    .card-header p {
      font-style:italic;
      margin-bottom:0;

    }
    p {
      font-size:.7rem;
      line-height:1.25;
    }

    .mb-3 {
      margin-bottom:0 !important;
    }
    .mr-1 {
      margin-right:0 !important;
    }

    .jamtrack-track {
      button {
        padding:0 5px 0 0;
        width:auto !important;

        img {
          width:28px !important;
          height:28px !important;
          margin-top:-3px !important;
        }
      }
      span {
        font-size:.7rem;
      }
    }
  }


  @media (max-width: 999px) {
    .left-column {
      flex: 0 0 100%;
      padding-right: 10px;
      padding-left: 10px;
    }
    .preview-region {
      width: 100%;
      right: 0;
      position: relative;
      top: 0;
    }
    .top-region-container {
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: auto auto;
      gap:0;
    }
  
    #root {
      h2 {
        margin-top: 1.5rem;
      }
    }

    .awesome-image-left, .awesome-image-right, .awesome-image-left-tall, .awesome-image-right-tall {
      width:100% !important;
      margin-bottom:1rem;
    }
  }

  .right-column {

  }

  .background {
    background-color: #edf2f9;
  }

  .content-row {
    padding-top: 1rem;

  }

  /* Optional: Slight background distinction for regions */
  .region {
    /* padding: 1rem;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 5px; */
  }

  .center-children {
    display: flex;
    justify-content: center;
  }

  .claim-free-backing-track {
    padding: 1.0rem 2rem !important;
    border-radius: 4px !important;
    font-weight: bold !important;
    font-size: 1.2rem !important;
  }


  @media(max-width:767px) {
    .claim-free-backing-track {
      padding:1.0rem !important;
      max-width:80%;
    }
  }

  .claim-free-backing-track-text {
    font-size: 0.9rem;
    color: #666;
    font-style: italic;
    margin-top: 0.5rem;
  }

  .video-wrapper {
    width: 100%;
  }

  .video-container {
    width: 100%;
    padding-bottom: 53.33%;
    position: relative;
  }

  .video-container iframe {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
  }

  .number-icon {
    display: inline;
    position: relative;
    top: -0.1rem;
    margin-right: 0.6rem;

    svg {
      color: #3f7dde;
      height: 2.0rem;
      width: 2.0rem;
    }
  }

  .awesome-image-right {
    width: 50%;
    min-width: 150px;
    max-width:400px;
    float: right;
    margin-left: 2rem;

    &.trim-down {
      width:40%;
    }
  }

  .awesome-text {
    overflow:hidden;
    display:block;
  }

  @media (max-width: 600px) {
    .awesome-text {
      clear:both;
    }
    .awesome-image-right-tall, .awesome-image-left-tall, .awesome-image-right, .awesome-image-left {

    }
  }

  .awesome-image-left {
    width: 50%;
    min-width: 150px;
    max-width:400px;
    float: left;
    margin-right: 2rem;

    &.trim-down {
      width:40%;
    }
  }

  .awesome-image-right-tall {
    width: 40%;
    min-width: 150px;
    max-width:200px;
    float: right;
    margin-left: 2rem;
  }

  .awesome-image-left-tall {
    width: 40%;
    min-width: 150px;
    max-width:200px;
    float: left;
    margin-right: 2rem;
  }

  /** remove as much padding as possible to the page */
  .container {
    padding-right: 0 !important;
    padding-left: 0 !important;

  }

  .background {
    padding: 0;
  }

  p {
    font-size: 1rem;
    font-family: sans-serif;
    //text-align: justify;
    text-justify: inter-word;
  }

  .awesome-card {
    margin-bottom: 2rem;
  }

  footer p {
    font-size: 0.83333rem;
  }
}