[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;
      }
}