Variable name	Default value	Description
`--b-header`	`purple`	Background color for the header component.
`--h-header`	`3.5rem`	Height of the header component. Changes to 4rem on screens 1024px or wider.
`--p-header`	`0 1rem`	Padding for the header component.
`--horizontal-header`	`space-between`	Horizontal alignment (justify-content) of items within the header.
`--mb-header`	`2rem`	Bottom margin for the header component on screens 1024px or wider.
`--c-logo-header`	`#fff`	Text color of the logo in the header.
`--fs-logo-header`	`1.1rem`	Font size for the logo in the header.
`--spacing-items-header`	`.3rem`	Spacing (gap) between items within a 'header-items' container.

CSS Class	Description
`.header`	Base class for the main header container. Defines alignment, background, height, padding, position, etc.
`.header-items`	Class for grouping elements within the header. Defines alignment, display, and spacing.
`.header-logo`	Class for the logo element in the header. Defines color and font size.
`.btn`	Class for specific buttons within the header. Used in conjunction with the '.btn' class.
`.btn .text`	Styles for the text within a header button. Controls its visibility on different screen sizes.
`.btn .icon`	Styles for the icon within a header button.