{%- style -%}
  .rv-doctor-block[data-block-id="{{ block.id }}"] {
    border-radius: {{ block.settings.border_radius }}px;
    border: 1px solid {{ block.settings.border_color }};
    background: {{ block.settings.background_color }};
    display: flex;
    align-items: stretch;
    overflow: hidden;
    margin-top: {{ block.settings.margin_top }}px;
    margin-bottom: {{ block.settings.margin_bottom }}px;
  }
  .rv-doctor-block[data-block-id="{{ block.id }}"] .rv-doctor__image-wrap {
    flex: 0 0 {{ block.settings.image_width }}px;
    width: {{ block.settings.image_width }}px;
    align-self: stretch;
  }
  .rv-doctor-block[data-block-id="{{ block.id }}"] .rv-doctor__image-wrap img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center top;
  }
  .rv-doctor-block[data-block-id="{{ block.id }}"] .rv-doctor__body {
    flex: 1;
    min-width: 0;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    justify-content: center;
  }
  .rv-doctor-block[data-block-id="{{ block.id }}"] .rv-doctor__content {
    color: {{ block.settings.text_color }};
    font-size: {{ block.settings.content_font_size }}px;
    font-weight: 400;
    line-height: 1.45;
  }
  .rv-doctor-block[data-block-id="{{ block.id }}"] .rv-doctor__content p { margin: 0 0 0.5em; }
  .rv-doctor-block[data-block-id="{{ block.id }}"] .rv-doctor__content p:last-child { margin-bottom: 0; }
  .rv-doctor-block[data-block-id="{{ block.id }}"] .rv-doctor__content em {
    color: {{ block.settings.highlight_color }};
    font-style: normal;
  }
  .rv-doctor-block[data-block-id="{{ block.id }}"] .rv-doctor__author {
    color: {{ block.settings.text_color }};
    font-size: {{ block.settings.author_font_size }}px;
    font-weight: 400;
    line-height: 150%;
    text-transform: {{ block.settings.author_text_transform }};
  }
  .rv-doctor-block[data-block-id="{{ block.id }}"] .rv-doctor__author p { margin: 0; }
  .rv-doctor-block[data-block-id="{{ block.id }}"] .rv-doctor__author--mobile { display: none; }
  .rv-doctor-block[data-block-id="{{ block.id }}"] .rv-doctor__author-wrap { display: none; }

  @media screen and (max-width: 749px) {
    {%- if block.settings.mobile_author_position == 'under_photo' -%}
      .rv-doctor-block[data-block-id="{{ block.id }}"] .rv-doctor__author-wrap { display: block; }
      .rv-doctor-block[data-block-id="{{ block.id }}"] .rv-doctor__author--desktop { display: none; }
      .rv-doctor-block[data-block-id="{{ block.id }}"] .rv-doctor__author--mobile { display: block; }
    {%- else -%}
      .rv-doctor-block[data-block-id="{{ block.id }}"] .rv-doctor__author-wrap { display: none; }
      .rv-doctor-block[data-block-id="{{ block.id }}"] .rv-doctor__author--desktop { display: block; }
      .rv-doctor-block[data-block-id="{{ block.id }}"] .rv-doctor__author--mobile { display: none; }
    {%- endif -%}
    .rv-doctor-block[data-block-id="{{ block.id }}"] .rv-doctor__image-wrap {
      width: fit-content;
      max-width: {{ block.settings.image_width }}px;
      display: flex;
      flex-direction: column;
      align-items: stretch;
    }
    .rv-doctor-block[data-block-id="{{ block.id }}"] .rv-doctor__image-wrap img {
      width: {{ block.settings.image_width }}px;
      max-width: {{ block.settings.image_width }}px;
      display: block;
    }
    .rv-doctor-block[data-block-id="{{ block.id }}"] .rv-doctor__author-wrap {
      padding: 5px;
      background: #fff;
      text-align: center;
      width: 100%;
      box-sizing: border-box;
    }
  }
{%- endstyle -%}

<div class="rv-doctor-block {{ block.settings.visibility }}" data-block-id="{{ block.id }}" style="flex-direction: {{ block.settings.image_position }};" {{ block.shopify_attributes }}>
  <div class="rv-doctor__image-wrap">
    {%- if block.settings.doctor_image != blank -%}
      {{
        block.settings.doctor_image
        | image_url: width: 280
        | image_tag:
          loading: 'lazy',
          class: 'rv-doctor__img',
          widths: '140, 280',
          alt: block.settings.author_name
      }}
    {%- endif -%}
    <div class="rv-doctor__author-wrap">
      <div class="rv-doctor__author rv-doctor__author--mobile">
        <p>{{ block.settings.author_name }}</p>
      </div>
    </div>
  </div>
  <div class="rv-doctor__body">
    <div class="rv-doctor__content">{{ block.settings.quote_text }}</div>
    <div class="rv-doctor__author rv-doctor__author--desktop">
      <p>{{ block.settings.author_name }}</p>
    </div>
  </div>
</div>