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

[section="faq"] .section-core {
    display: grid;
    gap: var(--spacing-12);
    grid-template-columns: repeat(2, 1fr);
  }

:is([section="faq"] .section-core) .content {
      display: flex;
      gap: var(--spacing-12);
      flex-direction: column;
    }

:is(:is([section="faq"] .section-core) .content) .head {
        height: fit-content;
        padding: var(--spacing-64);
        border-radius: var(--radius-md);
        background-color: var(--color-surface-container-low);
        display: grid;
        gap: var(--spacing-8);
      }

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

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

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

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

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

/* Responsive */
@media (max-width: 769px) {
    [section="faq"] .section-core {
      grid-template-columns: 1fr;
    }
        :is(:is([section="faq"] .section-core) .content) .head {
          padding: calc(var(--spacing-24) + var(--spacing-8));
        }

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

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