<footer class="o-footer2">
	<div class="o-footer2__widgets">
		<div class="container">
			<div class="row">
				<div class="col-24">
					<a href="#">
						<img src="https://placehold.it/250x80" alt="Logo Company Ltd." class="o-footer2__logo__icon">
					</a>
				</div>
				<div class="col-24">
					<nav class="m-nav-base m-nav-base--sep">
						<ul class="m-nav-base__list">
							<li class="m-nav-base__item">
								<a href="#" class="o-footer2__link">Menu 01</a>
								<!-- Skip the closing tag -->
							<li class="m-nav-base__item">
								<a href="#" class="o-footer2__link">Menu 02</a>
								<!-- Skip the closing tag -->
							<li class="m-nav-base__item">
								<a href="#" class="o-footer2__link">Menu 03</a>
								<!-- Skip the closing tag -->
							<li class="m-nav-base__item">
								<a href="#" class="o-footer2__link">Menu 04</a>
								<!-- Skip the closing tag -->
							<li class="m-nav-base__item">
								<a href="#" class="o-footer2__link">Menu 05</a>
								<!-- Skip the closing tag -->
							<li class="m-nav-base__item">
								<a href="#" class="o-footer2__link">Menu 06</a>
								<!-- Skip the closing tag -->
						</ul>
					</nav>
				</div>
			</div>
		</div>
	</div>
	<div class="o-footer2__socket">
		<div class="container">
			<div class="row align-items-center">
				<div class="o-footer2__icons col-md-10 col-lg-8">
					<div class="m-social-icons m-social-icons--inline">
						<ul class="m-social-icons__list">
							<li class="m-social-icons__item">
								<a href="#" class="m-social-icons__link" target="_blank"><i class="icon-twitter" aria-hidden="true"></i></a>
								<!-- Skip the closing tag -->
							<li class="m-social-icons__item">
								<a href="#" class="m-social-icons__link" target="_blank"><i class="icon-facebook" aria-hidden="true"></i></a>
								<!-- Skip the closing tag -->
							<li class="m-social-icons__item">
								<a href="#" class="m-social-icons__link" target="_blank"><i class="icon-linkedin-square" aria-hidden="true"></i></a>
								<!-- Skip the closing tag -->
							<li class="m-social-icons__item">
								<a href="#" class="m-social-icons__link" target="_blank"><i class="icon-pinterest-p" aria-hidden="true"></i></a>
								<!-- Skip the closing tag -->
						</ul>
					</div>
				</div>
				<div class="o-footer2__copy col-md-7 col-lg-8"> © <?php echo date('Y'); ?> All rights reserved, Company, Ltd. </div>
				<div class="o-footer2__animato col-md-7 col-lg-8">
					<a href="https://www.animato.cz/" target="_blank">
						<i class="a-animato" aria-hidden="true"></i>
					</a>
				</div>
			</div>
		</div>
	</div>
</footer>

@import "atoms/animato/index";

@import "molecules/nav-base/index";

@import "molecules/social-icons/index";

.o-footer2 {

    background: color('gray-light');
    color: color('gray-dark');
    flex: 0 0 auto;
    text-align: center;

    a {

        @include text-underline(none, underline);
        color: inherit;

    }

    &__widgets {

        padding-bottom: space(2);
        padding-top: space(2);

        @media(min-width: breakpoint-min(md)) {

            padding-bottom: space(3);
            padding-top: space(3);

        }

    }

    &__socket {

        overflow: hidden;
        padding-bottom: space(2);
        padding-top: space(2);

    }

    &__copy {

        @include font-size(small);

        @media(min-width: breakpoint-min(md)) {

            order: 1;
            text-align: left;

        }

    }

    &__icons {

        @include font-size(large);

        @media(min-width: breakpoint-min(md)) {

            order: 2;

        }

    }

    &__animato {

        @media(min-width: breakpoint-min(md)) {

            order: 3;
            text-align: right;

        }

    }

}