ihk24/storybook/stories/_global/styles/main.scss

:root {
  --theme-color-white: #ffffff;
  --theme-color-background: #ffffff;

  --theme-color-primary: #003366;
  --theme-color-primary-rgb: 0, 51, 102;
  --theme-color-primary-dimmed-01: #335C85;
  --theme-color-primary-dimmed-02: #B0C4D6;
  --theme-color-primary-dimmed-03: #CCD7E6;
  --theme-color-primary-dimmed-04: #E3EBF5;

  --theme-color-secondary: #56BD66;
  --theme-color-secondary-intensed: #2E8533;
  --theme-color-secondary-dimmed: #E4F1E4;

  --theme-color-gradient-01: var(--theme-color-primary);
  --theme-color-gradient-02: #4BA490;
  --theme-color-gradient-03: #AFCC7A;

  --theme-color-link: var(--theme-color-primary);
  --theme-color-link-hover: var(--theme-color-secondary-intensed);

  --theme-color-success: var(--theme-color-secondary);
  --theme-color-success-dimmed: var(--theme-color-secondary-dimmed);
  --theme-color-warning: #FDC600;
  --theme-color-warning-dimmed: #FFF4CC;
  --theme-color-error: #EA515A;
  --theme-color-error-dimmed: #FBDCDE;
  --theme-grey-light: #EFF3F6;

  --header-height: 160px;

  --container-width: 1460px;
  --container-padding: 60px;
  --col-padding: 20px;
  --content-box-padding: 60px;
  --section-margin: calc(1.8vw + 2em); //calc(2% + 2em);
  --section-padding: calc(1.8vw + 2em);
  --section-headline-margin: -0.3em;

  --border-radius-xl: 32px;
  --border-radius-lg: 24px;
  --border-radius-md: 18px;
  --border-radius-sm: 14px;
  --border-radius-xs: 4px;

  --border-width: 8px;
  --border-width-hover: 14px;
  --icon-size: 30px;
  --icon-size-small: 22px;

  @media(min-width: 1921px) {
    --section-padding: 70px;
  }

  @media(max-width: 1339px) {
    --container-width: 1230px;
  }

  @media(max-width: 1199px) {
    --header-height: 100px;
    --content-box-padding: 42px;
    --container-padding: 40px;
    --col-padding: 15px;
  }

  @media(max-width: 999px) {
    --container-padding: 30px;
    --col-padding: 10px;
    --border-radius-lg: 20px;
    --border-radius-md: 16px;
    --border-radius-sm: 12px;
    --icon-size: 26px;
  }

  @media(max-width: 767px) {
    --header-height: 80px;
    --border-radius-lg: 16px;
    --border-radius-md: 14px;
    --icon-size: 24px;
    --border-width: 6px;
    --border-width-hover: 10px;
    --content-box-padding: 16px;
    --container-padding: 20px;
  }

  @media(max-width: 359px) {
    --header-height: 70px;
  }
}

html {
  scroll-behavior: smooth;
}

*, *::before, *::after {
  box-sizing: border-box;
}

.visually-hidden, .visuallyhidden {
  max-height: 0;
  max-width: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
}

button {
  font: inherit;
}

figure {
  max-width: 100%;
  margin: calc(1.5% + 20px) 0;

  figcaption {
    font-size: 18px;
    line-height: 1.2;
    margin-top: 12px;

    @media(max-width: 1199px) {
      font-size: 16px;
    }
  }
}

img {
  width: auto;
  height: auto;
}