$o-footer-bp1: m;
$o-footer-stripe-height: 48px;


.o-footer {
	@include z(z-footer);
	position: relative;
	background-color: palette(neutral, 0);
	color: palette(primary, 500);

	&::before {
		position: absolute;
	    content: '';
	    top: 0;
	    left: 50%;
		width: 1px;
		height: $o-footer-stripe-height;
		background-color: palette(primary, 500);
	}
}


.o-footer__main {
	@include contain;
	padding-top: $o-footer-stripe-height + space(5);
	padding-bottom: space(5);

	@include mq($o-footer-bp1) {
        display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: auto;
		grid-template-areas: "info brand .";
	}
}


.o-footer__brand {
	grid-area: brand;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 200px;
	height: 200px;
	margin: 0 auto space(4);
	border-radius: 50%;
	background-color: palette(primary, 500);
}


.o-footer__info {
	@include font-weight(light);
	grid-area: info;
	text-align: center;

	@include mq($o-footer-bp1) {
		text-align: left;
	}
}


.o-footer__heading {
	@include font-size(m);
	@include font-weight('black');
	font-family: $font-mokoko;
	margin-top: space(2);
}


.o-footer__address {
	margin-top: space(2);
}


.o-footer__contact {
	@include owl-children(space(1));
	margin-top: space(3);
}


.o-footer__link {
	display: inline-flex;
	align-items: center;
	position: relative;
	z-index: 0;
	text-decoration: none;
	cursor: pointer;
	color: palette(primary, 500);
	transition: all 150ms linear;

	&::before {
		content: attr(data-letter);
		flex: none;
		display: flex;
		align-items: center;
		justify-content: center;
		width: space(5);
		height: space(5);
		margin-right: space(2);
		border-radius: 50%;
		border: 1px solid rgba(palette(primary, 500), 0.48);
		transition: all 150ms linear;
	}
	
	&:hover {
		color: palette(primary, 600);

		&::before {
			border-color: currentColor !important;
			background-color: palette(primary, 300);
			color: palette(neutral, 0);
		}
	}
}