[section="about-us"] {
  display: grid;
  gap: var(--spacing-12);
}

[section="about-us"] .section-core {
    display: grid;
    gap: var(--spacing-12);
    grid-template-columns: auto 60%;
  }

:is([section="about-us"] .section-core) .content {
      padding: var(--spacing-64);
      border-radius: var(--radius-md);
      background-color: var(--color-surface-container-low);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

:is(:is([section="about-us"] .section-core) .content) .title {
        font: var(--font-headline-md);
      }

:is(:is([section="about-us"] .section-core) .content) .text {
        display: grid;
        gap: var(--spacing-48);
      }

:is(:is(:is([section="about-us"] .section-core) .content) .text) .description {
          opacity: 0.8;
          text-wrap: balance;
        }

:is(:is(:is([section="about-us"] .section-core) .content) .text) .action {
          color: inherit;
          width: fit-content;
        }

:is([section="about-us"] .section-core) .media {
      height: 70vh;
      overflow: hidden;
      position: relative;
      border-radius: var(--radius-md);
      background-color: var(--color-surface-container);
    }

:is(:is([section="about-us"] .section-core) .media) img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

:is(:is([section="about-us"] .section-core) .media) > [ui-icon] {
        opacity: 0.3;
        position: absolute;
        translate: -50% -50%;
        left: 50%;
        inset-block-start: 50%;
      }

/* Responsive */
@media (max-width: 1280px) {
    [section="about-us"] .section-core {
      height: 35vh;
      grid-template-columns: repeat(2, 1fr);
    }

      :is([section="about-us"] .section-core) .content {
        padding: var(--spacing-48);
      }

        :is(:is([section="about-us"] .section-core) .content) .title {
          margin-block-end: var(--spacing-8);
        }

      :is([section="about-us"] .section-core) .media {
        height: 100%;
      }
}

@media (max-width: 769px) {
    [section="about-us"] .section-core {
      height: auto;
      grid-template-columns: 1fr;
    }

      :is([section="about-us"] .section-core) .content {
        padding: calc(var(--spacing-24) + var(--spacing-8));
      }

        :is(:is([section="about-us"] .section-core) .content) .title {
          font: var(--font-title-lg);
        }

      :is([section="about-us"] .section-core) .media {
        height: 35vh;
      }
}


/* HAYYAK about mobile */
@media (max-width: 769px) {
  [section="about-us"] .section-core {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
  [section="about-us"] .section-core .media {
    order: 1 !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 5 !important;
  }
  [section="about-us"] .section-core .content {
    order: 2 !important;
    background: #FFFFFF !important;
  }
  [section="about-us"] .section-core .content .action {
    background: #2E3A35 !important;
    color: #FFFDF8 !important;
    border-radius: 999px !important;
    text-decoration: none !important;
  }
  [section="about-us"] .section-core .content .action::before {
    display: none !important;
    content: none !important;
  }
}

/* Premium balance: content centered vertically, parallel columns, no empty void */
[section="about-us"] .section-core {
  align-items: stretch;
}
:is([section="about-us"] .section-core) .content {
  justify-content: center;
  gap: var(--spacing-24);
  padding: var(--spacing-40) var(--spacing-32);
}
:is(:is([section="about-us"] .section-core) .content) .text {
  gap: var(--spacing-16);
}
:is([section="about-us"] .section-core) .media {
  height: auto;
  min-height: 320px;
  aspect-ratio: 4 / 5;
}

@media (min-width: 770px) {
  [section="about-us"] .section-core {
    grid-template-columns: 1fr 1.1fr;
    gap: var(--spacing-24);
  }
  :is([section="about-us"] .section-core) .content {
    padding: var(--spacing-48) var(--spacing-40);
  }
}

@media (max-width: 769px) {
  [section="about-us"] .section-core {
    height: auto;
  }
  :is([section="about-us"] .section-core) .content {
    padding: var(--spacing-24) var(--spacing-16);
    gap: var(--spacing-14);
  }
  :is([section="about-us"] .section-core) .media {
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 5;
  }
}