@font-face {
  font-family: Hamsa Plex;
  src: url('fonts/IBMPlexSansArabic-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: Hamsa Plex;
  src: url('fonts/IBMPlexSansArabic-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}

.hamsa-banner {
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-block-size: var(--banner-size, clamp(400px, 44vw, 700px));
  overflow: hidden;
  background: #21130f;
  color: #fff;
  direction: rtl;
  text-align: start;
  font-family: Hamsa Plex, Tahoma, sans-serif;
}

.hamsa-banner__photo,
.hamsa-banner::after {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.hamsa-banner__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% var(--banner-focus, 55%);
}

.hamsa-banner::after {
  content: '';
  background: linear-gradient(270deg, #1a0e0bc9 0%, #1a0e0b98 31%, #1a0e0b00 67%);
}

.hamsa-banner__copy {
  box-sizing: border-box;
  width: 48%;
  max-width: 760px;
  padding-block: 36px;
  padding-inline: clamp(28px, 6vw, 112px) clamp(12px, 3vw, 45px);
}

.hamsa-banner__eyebrow {
  display: flex;
  align-items: center;
  gap: .65em;
  font-size: clamp(13px, 1.35vw, 21px);
  font-weight: 600;
  line-height: 1.4;
}

.hamsa-banner__eyebrow::before {
  content: '';
  width: clamp(21px, 2.8vw, 44px);
  height: 2px;
  flex: none;
  background: #d6b587;
}

.hamsa-banner__title {
  margin: .13em 0 .18em;
  color: #fff;
  font-size: clamp(32px, 4.65vw, 75px);
  font-weight: 600;
  line-height: 1.14;
  text-wrap: balance;
}

.hamsa-banner__description {
  margin: 0;
  max-width: 34ch;
  color: #fff;
  font-size: clamp(15px, 1.7vw, 26px);
  line-height: 1.55;
}

@media (min-width: 1100px) {
  .hamsa-banner[data-framing='full'] .hamsa-banner__photo {
    display: flex;
    justify-content: flex-start;
    direction: ltr;
  }

  .hamsa-banner[data-framing='full'] .hamsa-banner__photo img {
    width: auto;
    max-width: 78%;
    object-fit: contain;
    object-position: left center;
    mask-image: linear-gradient(to right, #000 69%, transparent 99%);
  }
}

@media (max-width: 820px) {
  .hamsa-banner {
    align-items: start;
    min-block-size: var(--banner-size, clamp(370px, 118vw, 920px));
  }

  .hamsa-banner__photo {
    inset: 21% 0 0;
  }

  .hamsa-banner::after {
    background: linear-gradient(180deg, #21130f 0%, #21130f 19%, #21130fea 25%, #21130f9c 35%, #21130f00 57%);
  }

  .hamsa-banner__photo img {
    object-position: 50% var(--banner-focus, 55%);
  }

  .hamsa-banner__copy {
    width: 100%;
    max-width: none;
    padding: clamp(24px, 5vw, 50px) clamp(21px, 6vw, 56px) 10px;
  }

  .hamsa-banner__title {
    font-size: clamp(29px, 7vw, 59px);
  }

  .hamsa-banner__description {
    font-size: clamp(14px, 3.1vw, 24px);
    max-width: 42ch;
  }
}