.noora-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--noora-spacing-5);
  box-shadow: var(--noora-border-section);
  border-radius: var(--noora-radius-6);
  background: var(--noora-surface-background-tertiary);
  justify-section: center;
  box-sizing: border-box;
  padding: var(--noora-spacing-2);

  & > [data-part="header"] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--noora-spacing-3);
    box-sizing: border-box;
    padding: var(--noora-spacing-4) var(--noora-spacing-4) 0;
    width: 100%;

    & [data-part="icon-with-title"] {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: var(--noora-spacing-3);

      & [data-part="icon"] {
        display: flex;
        gap: 10px;
        box-shadow: var(--noora-border-light-default);
        border-radius: var(--noora-radius-3);
        background: var(--noora-surface-background-primary);
        padding: var(--noora-spacing-3);
        width: var(--noora-icon-size-medium);
        height: var(--noora-icon-size-medium);
        color: var(--noora-surface-label-primary);

        & svg {
          width: 100%;
          height: 100%;
        }
      }

      & [data-part="title"] {
        display: inline-flex;
        flex: 1 0 0;
        color: var(--noora-surface-label-primary);
        font: var(--noora-font-weight-medium) var(--noora-font-body-small);
      }
    }

    @media (max-width: 768px) {
      & {
        flex-direction: column;
        align-items: flex-start;
      }
    }

    & [data-part="actions"] {
      display: flex;
      align-items: center;
      gap: var(--noora-spacing-4);

      @media (max-width: 768px) {
        & {
          flex-direction: column;
          align-items: flex-start;
        }
      }
    }
  }
}

.noora-card__section {
  display: flex;
  position: relative;
  flex-direction: column;
  gap: var(--noora-spacing-5);
  box-sizing: border-box;
  box-shadow: var(--noora-border-light-default);
  border-radius: var(--noora-radius-4);
  background: var(--noora-surface-background-primary);
  padding: var(--noora-spacing-7);
  color: var(--noora-surface-label-primary);
}