/*-- -------------------------- -->
<---       Getting Started       -->
<--- -------------------------- -*/

@media only screen and (min-width: 0rem) {
  #getting-started {
    --rowPad: clamp(1.5rem, 5vw, 4.5rem);
    position: relative;
    width: 100%;
    padding: var(--sectionPadding);
    background-image: url('../images/GETTINGSTARTEDBACKGROUND.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-sizing: border-box;
    overflow: hidden;
  }
  #getting-started .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
  }
  #getting-started .cs-gs-row {
    width: 100%;
  }
  #getting-started .cs-gs-content {
    position: relative;
    z-index: 1;
  }
  /* Faded decorative image, bled flush to the true screen edge behind
     the text -- same treatment as the poem section's mobile images.
     Positioned against the section itself (not the row) so its top
     edge can sit flush against the section's own top edge. */
  #getting-started .cs-gs-image {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 0;
    width: clamp(14rem, 70vw, 22rem);
    height: auto;
    opacity: 0.3;
    pointer-events: none;
  }
  #getting-started .cs-topper {
    color: var(--navy);
  }
  #getting-started .cs-gs-content {
    width: 100%;
  }
  #getting-started .cs-title {
    margin: 0 0 1.25rem;
  }
  #getting-started .cs-text {
    width: 100%;
    max-width: 40rem;
    margin: 0 0 1.5rem;
    font-family: var(--bodyFont);
    font-size: 1rem;
    line-height: 1.65em;
    color: var(--navy);
  }
  #getting-started .cs-gs-subline {
    margin-bottom: 0.75rem;
    font-weight: 700;
  }
  #getting-started .cs-gs-list {
    width: 100%;
    max-width: 40rem;
    margin: 0 0 1.5rem;
    padding-left: 1.25rem;
    list-style: disc;
  }
  #getting-started .cs-gs-list li {
    font-family: var(--bodyFont);
    font-size: 1rem;
    line-height: 1.9em;
    color: var(--navy);
  }
}

/* Desktop - 64rem: content left, decorative image bled flush to the
   section's right edge (same --rowPad edge-flush technique used on
   My Approach). */
@media only screen and (min-width: 64rem) {
  #getting-started {
    --rowPad: clamp(1.5rem, 5vw, 4.5rem);
    padding-left: var(--rowPad);
    padding-right: var(--rowPad);
    /* The row's tallest child (the image) defines the row's height and
       sits flush with the row's own top edge, so zeroing the section's
       top padding here puts the image right against the section
       above - mobile keeps its normal top padding since the image is
       hidden there anyway. */
    padding-top: 0;
  }
  #getting-started .cs-container {
    max-width: 90rem;
  }
  #getting-started .cs-gs-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
  }
  #getting-started .cs-gs-content {
    width: 100%;
    max-width: 38rem;
  }
  #getting-started .cs-gs-image {
    display: block;
    position: static;
    top: auto;
    right: auto;
    transform: none;
    z-index: auto;
    opacity: 1;
    pointer-events: auto;
    margin-right: calc(var(--rowPad) * -1);
    width: clamp(20rem, 34vw, 32rem);
    height: auto;
    flex: none;
    object-fit: contain;
  }
}