.creative {
  &.sub-el-surf-x-small {
    --creative-sub-elements-padding: 3px;
    --title-font-size: 12px;
    --row-gap: 2px;

    &.horizontal-layout {
      .creative__sub-elements .creative__wrapper {
        column-gap: calc(var(--creative-sub-elements-padding) * 5 / 3);
      }

      &.sub-el-ratio-rect {
        --title-line-clamp: 2;
        --description-line-clamp: 2;
        --cta-text-transform: none !important;
      }

      &.sub-el-ratio-long,
      &.sub-el-ratio-x-long {
        &:has(.creative__ad-label) {
          --title-font-size: 10px;
        }

        .creative__sub-elements {
          column-gap: calc(var(--creative-sub-elements-padding) * 5 / 3);
          padding-left: calc(var(--creative-sub-elements-padding) * 10 / 3);
          padding-right: calc(var(--creative-sub-elements-padding) * 10 / 3);
        }
      }
    }

    &.sub-el-ratio-long {
      --title-line-clamp: 2;
      --description-line-clamp: 0;
    }
  }
}

.creative {
  &.sub-el-surf-small {
    --title-font-size: 14px;
    --row-gap: 4px;

    &.vertical-layout {
      --creative-sub-elements-padding: 10px;

      &.sub-el-ratio-rect {
        .creative__sub-elements:has(.creative__ad-label) {
          padding-top: 6px;

          .creative__ad-label {
            position: absolute;
            margin-top: calc(-6px - 1px - var(--creative-ad-label-height) / 2);
          }
        }
      }
    }

    &.horizontal-layout {
      --creative-sub-elements-padding: 5px;

      &.sub-el-ratio-rect,
      &.sub-el-ratio-square {
        --creative-sub-elements-padding: 10px;
      }

      &.sub-el-ratio-long,
      &.sub-el-ratio-x-long {
        .creative__sub-elements {
          column-gap: calc(var(--creative-sub-elements-padding) * 5 / 3);
          padding-left: calc(var(--creative-sub-elements-padding) * 10 / 3);
          padding-right: calc(var(--creative-sub-elements-padding) * 10 / 3);
        }
      }
    }

    &.sub-el-ratio-rect,
    &.sub-el-ratio-long,
    &.sub-el-ratio-x-long {
      --title-line-clamp: 2;
    }
  }
}

.creative {
  &.sub-el-surf-medium {
    --title-font-size: 18px;
    --row-gap: 6px;

    &.vertical-layout {
      &.sub-el-ratio-rect {
        .creative__sub-elements:has(.creative__ad-label) {
          padding-top: 7px;

          .creative__ad-label {
            position: absolute;
            margin-top: calc(-7px - 1px - var(--creative-ad-label-height) / 2);
          }
        }
      }
    }

    &.sub-el-ratio-rect {
      --title-line-clamp: 2;
      --description-line-clamp: 2;
      --cta-text-transform: none !important;
    }

    &.sub-el-ratio-x-long {
      --title-line-clamp: 2;
      --description-line-clamp: 0;
    }
  }
}

.creative {
  &.sub-el-surf-large {
    --title-font-size: 20px;
    --row-gap: 8px;

    .creative__sub-elements {
      .creative__brand-name {
        margin-top: 4px;
      }

      .creative__ad-label {
        margin-bottom: -4px;
      }
    }

    &.vertical-layout {
      &.sub-el-ratio-rect,
      &.sub-el-ratio-long {
        .creative__sub-elements:has(.creative__ad-label) {
          padding-top: 9px;

          .creative__ad-label {
            position: absolute;
            margin-top: calc(-9px - 1px - var(--creative-ad-label-height) / 2);
          }
        }
      }
    }

    &.sub-el-ratio-square {
      --title-line-clamp: 3;
      --description-line-clamp: 2;
    }

    &.sub-el-ratio-rect,
    &.sub-el-ratio-long {
      --title-line-clamp: 2;
      --description-line-clamp: 2;
    }
  }
}

.creative {
  &.sub-el-surf-x-large {
    --title-font-size: 22px;
    --row-gap: 10px;
    --creative-sub-elements-padding: 25px;

    &.sub-el-ratio-square,
    &.sub-el-ratio-rect,
    &.sub-el-ratio-long {
      --title-line-clamp: 3;
      --description-line-clamp: 2;
    }
  }
}

.creative {
  --creative-sub-elements-padding: 15px;
  --title-font-weight: 700;
  --description-font-weight: 400;
  --row-gap: 2px;

  .creative__sub-elements {
    row-gap: var(--row-gap);

    .creative__title.expand_to_description {
      -webkit-line-clamp: var(--title-line-clamp); /* number of lines to show */
      line-clamp: var(--title-line-clamp);
    }
  }

  &.vertical-layout {
    .creative__sub-elements {
      .creative__cta {
        min-width: calc(var(--creative-width) * 1 / 3);
      }
    }
  }

  &.horizontal-layout {
    .creative__sub-elements .creative__wrapper {
      row-gap: var(--row-gap);
    }
  }
}

.creative{--cta-background-color: #004987;--cta-color: #ffffff;--cta-text-transform: none !important}