Add necessary styles

Author: gooklani

src/scss/general/_button.scss

@@ -0,0 +1,51 @@
+.button {
+	border: 1px solid;
+
+	@include box(inline);
+	@include font-weight(bold);
+	@include radius(medium);
+	@include transition(color, background-color, border-color);
+
+	&--medium {
+		padding: 5px 16px;
+	}
+
+	&--large {
+		padding: 11px 24px;
+	}
+
+	&--success {
+
+		@include color(tile);
+		@include background(secondary);
+		@include border-color(secondary);
+
+		&:hover {
+
+			@include background(secondary-alt);
+			@include border-color(secondary-alt);
+		}
+
+		&:focus {
+			box-shadow: 0 0 0 3px rgba(113, 176, 47, 0.5);
+		}
+	}
+
+	&--info {
+
+		@include color(primary);
+		@include background(tile);
+		@include border-color(border);
+
+		&:hover {
+
+			@include color(tile);
+			@include background(primary);
+			@include border-color(primary);
+		}
+
+		&:focus {
+			box-shadow: 0 0 0 3px rgba(150, 88, 138, 0.5);
+		}
+	}
+}

src/scss/general/_colors.scss

@@ -0,0 +1,20 @@
+@each $color in dark, tile, primary {
+	.background-#{$color} {
+
+		@include background(#{$color});
+	}
+}
+
+@each $color in light, tile {
+	.color-#{$color} {
+
+		@include color(#{$color});
+	}
+}
+
+.has-color {
+
+	a {
+		color: inherit;
+	}
+}

src/scss/general/_elements.scss

@@ -0,0 +1,32 @@
+hr {
+	margin: 0;
+	border-style: solid;
+	border-width: 1px 0 0;
+
+	@include border-color(border);
+}
+
+.list-style-line {
+
+	@include box(wrap, middle);
+}
+
+.list-style-none {
+	padding: 0;
+	margin: 0;
+
+	li {
+		list-style: none;
+	}
+}
+
+.badge {
+	margin: 0 12px 0 4px;
+	display: inline-block;
+	padding: 3px 5px;
+	font-size: 75%;
+	line-height: 1;
+
+	@include background(badge);
+	@include radius(medium);
+}

src/scss/general/_index.scss

@@ -0,0 +1,6 @@
+@import "button";
+@import "colors";
+@import "elements";
+@import "scaffolding";
+@import "spacing";
+@import "typography";

src/scss/general/_scaffolding.scss

@@ -0,0 +1,29 @@
+.hide-visually {
+
+	@include hidden(visually);
+}
+
+.hide-on-mobile {
+
+	@include mobile {
+
+		@include hidden();
+	}
+}
+
+.content-wrapper {
+	max-width: 1140px;
+	margin-inline: auto;
+}
+
+.width-narrow {
+	max-width: 915px;
+}
+
+.width-medium {
+	max-width: 845px;
+}
+
+.width-small {
+	max-width: 590px;
+}

src/scss/general/_spacing.scss

@@ -0,0 +1,13 @@
+@each $position in inline, block {
+
+	@each $size in normal, small {
+		.padding-#{$position}-#{$size} {
+
+			@if $size == normal {
+				padding-#{$position}: 24px;
+			} @else {
+				padding-#{$position}: 12px;
+			}
+		}
+	}
+}

src/scss/general/_typography.scss

@@ -0,0 +1,120 @@
+body {
+	font-size: 16px;
+	line-height: 1.5;
+	margin: 0;
+
+	@include color(darker);
+	@include background(background);
+	@include font-family(primary);
+}
+
+p {
+	margin-top: 0;
+}
+
+h1 {
+	line-height: 1;
+	margin: {
+		top: 0;
+		bottom: 24px;
+	}
+	font-size: clamp(55px, 3.5vw, 72px);
+
+	@include color(darker);
+	@include font-weight(normal);
+}
+
+.h2,
+h2 {
+	font-size: clamp(40px, 3.5vw, 56px);
+	line-height: 1.15;
+	margin: {
+		top: 0;
+		bottom: clamp(18px, 3.5vw, 24px);
+	}
+	letter-spacing: 0.02em;
+
+	@include font-weight(normal);
+}
+
+h3 {
+	font-size: 24px;
+	line-height: 1.25;
+	margin: {
+		top: 0;
+		bottom: 20px;
+	}
+	letter-spacing: 0.02em;
+
+	@include font-weight(bold);
+}
+
+a {
+	text-decoration: none;
+
+	@include color(primary);
+	@include transition(color, opacity);
+}
+
+h4,
+.lg-txt {
+	font-size: 24px;
+	line-height: 1.25;
+	margin: {
+		top: 0;
+		bottom: clamp(30px, 3.5vw, 48px);
+	}
+	font-weight: var(--bold);
+
+	@include font-weight(bold);
+}
+
+h5 {
+	font-size: 20px;
+	line-height: 1.5;
+	margin: {
+		top: 0;
+		bottom: 12px;
+	}
+
+	@include font-weight(bold);
+}
+
+small {
+	font-size: 14px;
+	margin-bottom: 24px;
+	letter-spacing: 1px;
+	display: block;
+}
+
+.title {
+	font-size: clamp(32px, 3.5vw, 40px);
+	margin-top: 6px;
+}
+
+.lead {
+	font-size: 20px;
+}
+
+p.bold + p {
+	font-size: 14px;
+}
+
+.small {
+	font-size: 13px;
+}
+
+.larger {
+	font-size: 72px;
+	line-height: 1.1;
+	letter-spacing: 0.02em;
+}
+
+.bold {
+
+	@include font-weight(bold);
+}
+
+.italic {
+	font-style: italic;
+}

src/scss/helpers/_index.scss

@@ -0,0 +1 @@
+@import "mixins";

src/scss/helpers/_mixins.scss

@@ -0,0 +1,23 @@
+@mixin font-family($name) {
+	font-family: var(--font-family--#{$name});
+}
+
+@mixin font-weight($name) {
+	font-weight: var(--font-weight--#{$name});
+}
+
+@mixin background($name) {
+	background-color: var(--color--#{$name});
+}
+
+@mixin border-color($name) {
+	border-color: var(--color--#{$name});
+}
+
+@mixin color($name) {
+	color: var(--color--#{$name});
+}
+
+@mixin radius($name) {
+	border-radius: var(--radius--#{$name});
+}

src/scss/main/_cookiebanner.scss

@@ -0,0 +1,36 @@
+.cookiebanner {
+	width: min(1140px, 88vw);
+	margin: 0 auto 24px;
+	gap: 12px;
+	border: 1px solid;
+
+	@include box(middle);
+	@include border-color(border);
+	@include radius(medium);
+
+	@include from-tablet {
+
+		&::before {
+			content: "";
+			background-image: url(../assets/images/cookie.svg);
+			background-repeat: no-repeat;
+			display: block;
+			background-size: 34px;
+
+			@include square(34px);
+		}
+	}
+
+
+	> span {
+		flex: 1;
+
+		@include from-tablet {
+			margin: 7px auto 7px 0;
+		}
+
+		@include mobile {
+			margin: 7px 12px;
+		}
+	}
+}