<!DOCTYPE html>
<html lang="ru" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{default}">

<head>
    <title>Контакты</title>
</head>

<body th:with="bodyClass='bg-white', mainClass='justify-content-center'">
    <main layout:fragment="content">
        <div class="row">
            <div class="col-lg-5 px-0 me-lg-5">
                <div class="block d-flex flex-column align-items-start">
                    <p class="mb-4 mb-sm-5 lh-1" id="contacts-title">
                        Контакты
                    </p>
                    <div class="contacts-item d-flex mb-5">
                        <img src="phone-call.png" class="contacts-icon me-4" alt="phone-call" width="88" height="88">
                        <div class="d-flex flex-column">
                            <p class="contacts-item-main-info mb-3">
                                +7 927 818-61-60
                            </p>
                            <p class="contacts-item-clarification">
                                Служба клиентской поддержки
                                c 8:00 - 22:00 (Мск)
                            </p>
                        </div>
                    </div>
                    <div class="contacts-item d-flex mb-5">
                        <img src="email.png" class="contacts-icon me-4" alt="email" width="88" height="88">
                        <div class="d-flex flex-column justify-content-center">
                            <p class="contacts-item-main-info mb-3">
                                readroom@mail.ru
                            </p>
                            <p class="contacts-item-clarification">
                                Электронный адрес компании
                            </p>
                        </div>
                    </div>
                    <div class="contacts-item d-flex mb-3">
                        <img src="skype.png" class="contacts-icon me-4" alt="skype" width="88" height="88">
                        <div class="d-flex flex-column justify-content-center">
                            <p class="contacts-item-main-info">
                                Пообщайтесь с сотрудниками по видеосвязи
                            </p>
                        </div>
                    </div>
                    <a href="/" class="mb-3 mb-sm-4 text-decoration-none" id="skype-link">
                        Перейти в Skype
                    </a>
                    <div class="mb-4 mb-sm-5 mt-2 mb-lg-0">
                        <p class="mb-3" id="contacts-address">
                            Наш адрес:
                        </p>
                        <p id="contacts-address-value">
                            432064, Россия, г. Ульяновск, проспект Врача Сурова, 2А
                        </p>
                    </div>
                </div>
            </div>
            <div class="col px-0 align-self-center">
                <div class="block d-flex justify-content-center justify-content-lg-end">
                    <img src="map.png" class="border border-black border-2 img-fluid h-100" alt="map" width="665"
                        height="689">
                </div>
            </div>
        </div>
    </main>
</body>

</html>