<!-- ============================================ -->
<!--                 Side By Side                 -->
<!-- ============================================ -->

<section id="sbs-2369">
    <div class="cs-wrapper">
        <p class="cs-header">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni doloribus 
            sit laboriosam ratione veritatis, quisquam asperiores autem, optio minus 
            unde eos ipsa provident saepe deleniti, natus velit dolore? Sint laboriosam, 
            saepe vel est numquam iste harum dignissimos voluptas eum illum sequi id nihil!
        </p>
        <img class="cs-arrow" loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Icons/curve-arrow.svg" alt="freccia grafica" width="154" height="120">
    </div>
    <div class="cs-container">
        <div class="cs-image-group">
            <picture class="cs-picture">
                <source media="(max-width: 600px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/therapist1.png">
                <source media="(min-width: 601px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/therapist1.png">
                <img loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/therapist1.png" alt="donna" width="565" height="814">
            </picture>
            <img class="cs-flower" loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Icons/flower-blur.svg" alt="" width="635" height="697">
        </div>
        <div class="cs-content">
            <span class="cs-topper">Chi Siamo</span>
            <h2 class="cs-title">Trasformiamo la Terapia, Miglioriamo la Vita</h2>
            <p class="cs-text">
                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Velit esse deleniti 
                recusandae suscipit voluptatum eveniet provident repudiandae, sequi cum ipsa 
                incidunt quisquam ipsam? Temporibus nihil eligendi illum quos tempora delectus 
                inventore dolore repudiandae perspiciatis voluptatum, 
                adipisci placeat, ducimus dolorem consequuntur?
            </p>
            <ul class="cs-ul">
                <li class="cs-li">
                    <img class="cs-icon" loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Icons/swirl.svg" alt="" width="24" height="24">
                    Riconoscere i fattori scatenanti emotivi e rispondere in modo sano ed equilibrato.
                </li>
                <li class="cs-li">
                    <img class="cs-icon" loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Icons/swirl.svg" alt="" width="24" height="24">
                    Riconoscere i fattori scatenanti emotivi e rispondere in modo sano ed equilibrato.
                </li>
                <li class="cs-li">
                    <img class="cs-icon" loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Icons/swirl.svg" alt="" width="24" height="24">
                    Riconoscere i fattori scatenanti emotivi e rispondere in modo sano ed equilibrato.
                </li>
            </ul>
            <a href="" class="cs-button-solid">Prenota Ora</a>
        </div>
    </div>
</section>

/*-- -------------------------- -->
<---        Side By Side        -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbs-2369 {
    padding: var(--sectionPadding);
    padding-bottom: 0;
    background-color: #FBF5F1;
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  #sbs-2369 .cs-container {
    width: 100%;
    max-width: 49rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(3rem, 6vw, 4rem);
  }
  #sbs-2369 .cs-wrapper {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #sbs-2369 .cs-content {
    text-align: left;
    width: 100%;
    max-width: 43.375rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  #sbs-2369 .cs-header {
    font-size: clamp(1.25rem, 3vw, 1.9375rem);
    text-align: center;
    line-height: 1.2em;
    font-weight: 700;
    margin: 0 0 2rem 0;
    color: var(--headerColor);
  }
  #sbs-2369 .cs-arrow {
    width: 9.625rem;
    height: auto;
    margin-bottom: 1.25rem;
    display: block;
  }
  #sbs-2369 .cs-topper {
    text-align: center;
    margin: auto;
  }
  #sbs-2369 .cs-title {
    text-align: center;
    max-width: 20ch;
    margin: auto;
    margin-bottom: 2rem;
    padding-bottom: clamp(3rem, 6vw, 4rem);
    position: relative;
    z-index: 1;
  }
  #sbs-2369 .cs-title:before {
    content: '';
    width: 100vw;
    height: 1px;
    background: #D2D8DF;
    opacity: 1;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
  }
  #sbs-2369 .cs-text {
    margin-bottom: 1rem;
  }
  #sbs-2369 .cs-text:last-of-type {
    margin-bottom: clamp(1.5rem, 3vw, 2rem);
  }
  #sbs-2369 .cs-ul {
    width: 100%;
    margin: 0 0 2rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  #sbs-2369 .cs-li {
    font-size: var(--bodyFontSize);
    list-style: none;
    line-height: 1.5em;
    width: 100%;
    color: var(--bodyTextColor);
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.5rem;
  }
  #sbs-2369 .cs-icon {
    width: 1.1875rem;
    height: auto;
    margin-top: 3px;
    display: block;
    flex: none;
  }
  #sbs-2369 .cs-button-solid {
    font-size: 1rem;
    line-height: clamp(2.875em, 5.5vw, 3.5em);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: 0;
    color: #fff;
    overflow: hidden;
    min-width: 9.375rem;
    padding: 0 1.5rem;
    background-color: var(--primary);
    border-radius: 6.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
  }
  #sbs-2369 .cs-button-solid:before {
    content: '';
    position: absolute;
    height: 100%;
    width: 0%;
    background: #000;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 0.25rem;
    transition: width 0.3s;
  }
  #sbs-2369 .cs-button-solid:hover:before {
    width: 100%;
  }
  #sbs-2369 .cs-image-group {
    font-size: min(2.8vw, .75rem);
    width: 32.625em;
    height: auto;
    order: 2;
    position: relative;
    z-index: 1;
  }
  #sbs-2369 .cs-picture {
    width: 100%;
    height: auto;
    display: block;
  }
  #sbs-2369 .cs-picture img {
    width: 100%;
    height: auto;
    display: block;
  }
  #sbs-2369 .cs-flower {
    width: 75em;
    height: auto;
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: -1;
    transform: translateX(-50%);
  }
}
/* Desktop - 1200px */
@media only screen and (min-width: 75rem) {
  #sbs-2369 {
    padding: var(--sectionPadding);
    padding-bottom: 0;
  }
  #sbs-2369 .cs-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    z-index: 1;
  }
  #sbs-2369 .cs-content {
    width: 50%;
    padding-bottom: clamp(3.75rem, 7.82vw, 6.25rem);
    align-items: flex-start;
  }
  #sbs-2369 .cs-topper,
  #sbs-2369 .cs-title {
    text-align: left;
    margin: 0;
  }
  #sbs-2369 .cs-topper {
    margin-bottom: 0.25rem;
  }
  #sbs-2369 .cs-title {
    margin-bottom: 2rem;
  }
  #sbs-2369 .cs-image-group {
    font-size: min(1.2vw, 1rem);
    height: auto;
    order: -1;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
  }
  #sbs-2369 .cs-picture {
    height: 100%;
    width: auto;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    position: relative;
    z-index: 1;
  }
  #sbs-2369 .cs-picture img {
    height: 100%;
    width: auto;
  }
  #sbs-2369 .cs-flower {
    width: 80vw;
    max-width: 56.25rem;
  }
}