@font-face {
	font-family: "HK Grotesk";
	font-style: normal;
	font-weight: normal;
	src: url("../fonts/HKGrotesk-Regular.woff2") format("woff2"),
		url("../fonts/HKGrotesk-Regular.woff") format("woff");
}

@font-face {
	font-family: "HK Grotesk";
	font-style: normal;
	font-weight: bold;
	src: url("../fonts/HKGrotesk-Bold.woff2") format("woff2"), url("../fonts/HKGrotesk-Bold.woff") format("woff");
}

:root {
	--black: #1a1818;
	--white: #fffefd;
	--grey: #cfccc8;
	--green: #b2bfb5;
	--red: #d24e39;
	--pink: #f7c9b8;

	--font: "HK Grotesk", sans-serif;

	--c-bg-default: var(--green);
	--c-text-default: var(--black);
}

html {
	margin: 0;
	padding: 0;
}

body {
	background: var(--c-bg-default);
	color: var(--c-text-default);
	font-family: var(--font);
	line-height: 1.375;
	margin: 0;
	max-width: 100vw;
	overflow-x: hidden;
	padding: 1em max(.75em, 7.5%);
}

@media (min-width:30em) {
	body{
		padding: 1em calc( 50% - min(20em, 50%) + 10% );
	}
}

.red {
	--c-bg-default: var(--red);
	--c-text-default: var(--pink);
}

.pink {
	--c-bg-default: var(--pink);
	--c-text-default: var(--red);
}

.grey {
	--c-bg-default: var(--grey);
	--c-text-default: var(--red);
}

.logo {
	font-size: 2em;
	height: max(1.5em, min(4em, 10vw));
	mix-blend-mode: multiply;
	opacity: .9;
	overflow: hidden;
}

.logo::before {
	background: url(../img/logo.svg) no-repeat center center;
	background-size: contain;
	content: "";
	display: block;
	height: 100%;
	margin: 0 0 2em;
	width: 100%;
}

h2 {
	font-size: 1.272em;
	font-weight: bold;
}

h3 {
	font-size: 1em;
	font-weight: bold;
	margin: 1.5em 0 .5em;
}

img {
	display: block;
	height: auto;
	max-width: 100%;
	margin: 2em 0;
}

a {
	color: inherit;
}

.tel {
	word-spacing: -.1em;
}

.price-list ul {
	margin: 0;
	padding: 0;
}

.price-list li {
	display: flex;
	justify-content: space-between;
	margin: .25em 0;
	padding: 0;
}

/* ! Mobile Layout */

img:first-of-type {
	max-height: 50vw;
	object-fit: cover;
	width: 100%;
}

@media (max-width: 49.999em) {

	@media (min-width:20em) {

		h2:first-of-type {
			float: left;
			margin-bottom: -3em;
			margin-left: -5%;
			width: 33%;
		}

		img:first-of-type {
			margin-left: 36.5%;
			width: 72.5%;
		}
	}

	img:nth-of-type(2) {
		left: 50%;
		margin-bottom: -4em;
		position: relative;
		transform: translateX(-50vw);
		width: 75vw;
		z-index: -1;
	}

	img:nth-of-type(3),
	img:nth-of-type(4),
	img:nth-of-type(6),
	img:nth-of-type(7) {
		float: left;
		max-width: 52%;
	}

	img:nth-of-type(5) {
		margin-left: -2em;
	}

	img:nth-of-type(4),
	img:nth-of-type(7) {
		margin-left: 1em;
		margin-right: calc( -4% - 1em );
	}
}

/* ! Desktop Layout */
@media (min-width:50em) {
	body {
		display: grid;
		font-size: 1.25em;
		grid-gap: 1em;
		grid-template-columns: repeat(8, 1fr);
		padding: 1em 0;
		row-gap: max(2em, 7.5vw);
	}

	.logo {
		grid-column: 1 / -1;
	}

	h2:first-of-type {
		float: none;
		grid-column: 2 / span 4;
		margin: 1em 0;
		width: 100%;
	}

	p {
		grid-column: 3 / span 4;
		margin: -.5em;
		margin-bottom: 1em;
		padding: .5em;
	}

	p:first-of-type {
		grid-column-start: 4;
		grid-row: 4 / span 2;
	}

	p:nth-of-type(2) {
		grid-column-start: 2;
		grid-row: 8 / span 2;
	}

	img {
		position: relative;
		z-index: -1;
	}

	img:first-of-type {
		grid-column: 2 / span 7;
		grid-row: 3 / span 1;
		margin: 0;
	}

	img:nth-of-type(2) {
		grid-column: 5 / span 4;
		grid-row: 8 / span 2;
	}

	img:nth-of-type(3),
	img:nth-of-type(4),
	img:nth-of-type(6),
	img:nth-of-type(7) {
		float: none;
		margin: 0;
		max-width: 100%;
	}

	img:nth-of-type(3) {
		grid-column: 1 / span 2;
		grid-row: 5 / span 2;
	}

	img:nth-of-type(4) {
		grid-column: 3 / span 2;
		grid-row: 5 / span 2;
	}

	img:nth-of-type(5) {
		grid-column: 5 / span 3;
		grid-row: 6 / span 2;
	}

	.price-list {
		grid-column: 5 / span 3;
		grid-row: 10 / span 3;
	}

	img:nth-of-type(6) {
		grid-column: 1 / span 3;
		grid-row: 10 / span 3;
	}

	img:nth-of-type(7) {
		grid-column: 5 / span 3;
		grid-row: 12 / span 3;
	}

	.contact {
		grid-column: 2 / span 3;
		grid-row: 13 / span 1;

	}

	footer {
		grid-column: 1 / -1;
		grid-row: 14 / span 1;
	}
}


footer {
	padding: 5% 5% 1em;
}

footer img,
footer img:nth-child(1),
footer img:nth-child(2) {
	display: block;
	height: auto;
	margin: 1.5em 0;
	max-height: 5em;
	max-width: min(33vw, 12em);
	object-fit: initial;
	position: static;
	transform: none;
	width: auto;
}

footer img[alt="ABL"] {
	transform: translateX(-21%);
}

footer img[alt="Aivan"] {
	max-width: min(25vw, 9em);
	transform: translateX(-9%);
}