<footer class="o-footer3">
	<div class="o-footer3__widgets">
		<div class="container">
			<div class="row">
				<div class="o-footer3__logo col-lg-6">
					<a href="#">
						<img src="https://placehold.it/250x150" alt="Logo Company Ltd." class="o-footer3__logo__icon">
					</a>
				</div>
				<div class="o-footer3__column col-sm-12 col-lg-6">
					<h3 class="o-footer3__title">Menu title</h3>
					<nav>
						<ul class="m-list">
							<li class="m-list__item">
								<a href="#" class="o-footer3__link">Name of the link page</a>
							</li>
							<li class="m-list__item">
								<a href="#" class="o-footer3__link">Name of the link page</a>
							</li>
							<li class="m-list__item">
								<a href="#" class="o-footer3__link">Name of the link page</a>
							</li>
							<li class="m-list__item">
								<a href="#" class="o-footer3__link">Name of the link page</a>
							</li>
						</ul>
					</nav>
				</div>
				<div class="o-footer3__column col-sm-12 col-lg-6">
					<h3 class="o-footer3__title">Menu title</h3>
					<nav>
						<ul class="m-list">
							<li class="m-list__item">
								<a href="#" class="o-footer3__link">Name of the link page</a>
							</li>
							<li class="m-list__item">
								<a href="#" class="o-footer3__link">Name of the link page</a>
							</li>
							<li class="m-list__item">
								<a href="#" class="o-footer3__link">Name of the link page</a>
							</li>
							<li class="m-list__item">
								<a href="#" class="o-footer3__link">Name of the link page</a>
							</li>
						</ul>
					</nav>
				</div>
				<div class="o-footer3__icons col-lg-6">
					<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>
		</div>
	</div>
	<div class="o-footer3__socket">
		<div class="container">
			<div class="row align-items-center">
				<div class="o-footer3__copy col-md-12"> © <?php echo date('Y'); ?> All rights reserved, Company, Ltd. </div>
				<div class="o-footer3__animato col-md-12">
					<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/list/index";

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

.o-footer3 {

    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);

    }

    &__column {

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

            text-align: left;

        }

    }

    &__logo {

        align-self: center;

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

            text-align: left;

        }

    }

    &__title {

        @include font-size(normal);
        line-height: line-height(normal);

    }

    &__icons {

        @include font-size(large);
        align-self: center;

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

            text-align: left;

        }

    }

    &__copy {

        @include font-size(small);

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

            text-align: left;

        }

    }

    &__animato {

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

            text-align: right;

        }

    }

}