diff --git a/main/static/main/css/styles.css b/main/static/main/css/styles.css
index 2e3f994e459ceab9d5433241f5248dd028a4f6e5..426eea504041dee8558ddbe935b03e565eeeca68 100644
--- a/main/static/main/css/styles.css
+++ b/main/static/main/css/styles.css
@@ -1531,10 +1531,6 @@ video {
width: 100%;
}
-.person-box {
- width: 520px;
-}
-
.person-box-big {
max-width: 575px;
width: 100%;
@@ -3372,6 +3368,10 @@ p{
margin-bottom: 0.75rem;
}
+.mt-6{
+ margin-top: 1.5rem;
+}
+
.mb-12{
margin-bottom: 3rem;
}
@@ -3522,6 +3522,10 @@ p{
max-width: 24rem;
}
+.max-w-lg{
+ max-width: 32rem;
+}
+
.max-w-xs{
max-width: 20rem;
}
@@ -3860,6 +3864,10 @@ p{
font-size: 1.125rem;
}
+.text-base{
+ font-size: 1rem;
+}
+
.text-xs{
font-size: .75rem;
}
@@ -3872,10 +3880,6 @@ p{
font-size: .65rem;
}
-.text-base{
- font-size: 1rem;
-}
-
.text-3xl{
font-size: 1.875rem;
}
@@ -4218,10 +4222,18 @@ a.icon-link:hover span{
margin-bottom: 2rem;
}
+ .sm\:mt-0{
+ margin-top: 0px;
+ }
+
.sm\:mr-7{
margin-right: 1.75rem;
}
+ .sm\:mb-6{
+ margin-bottom: 1.5rem;
+ }
+
.sm\:mb-0{
margin-bottom: 0px;
}
@@ -4536,6 +4548,10 @@ a.icon-link:hover span{
margin-bottom: 8rem;
}
+ .xl\:mb-8{
+ margin-bottom: 2rem;
+ }
+
.xl\:block{
display: block;
}
@@ -4628,6 +4644,10 @@ a.icon-link:hover span{
gap: 1.25rem;
}
+ .xl\:gap-16{
+ gap: 4rem;
+ }
+
.xl\:space-x-3 > :not([hidden]) ~ :not([hidden]){
--tw-space-x-reverse: 0;
margin-right: calc(0.75rem * var(--tw-space-x-reverse));
diff --git a/main/styleguide/source/_patterns/molecules/blocks/contact-person-box.mustache b/main/styleguide/source/_patterns/molecules/blocks/contact-person-box.mustache
index ee09f16992e362b12eb1601fb4ef5ec609c36142..f755cdc72db6123c826dd47e6f6e44774ffdd490 100644
--- a/main/styleguide/source/_patterns/molecules/blocks/contact-person-box.mustache
+++ b/main/styleguide/source/_patterns/molecules/blocks/contact-person-box.mustache
@@ -1,16 +1,16 @@
-<div class="flex max-w-sm">
- <div class="mr-2 sm:mr-7">
+<div class="flex max-w-lg">
+ <div class="mt-6 sm:mt-0 mr-4 sm:mr-7">
<img class="rounded-full shadow-sm w-20 sm:w-40" src="https://randomuser.me/api/portraits/women/26.jpg"
alt="user image">
</div>
<div class="flex flex-col py-4">
- <h6 class="font-bold text-2xl sm:text-3xl">
+ <h6 class="font-bold mb-2 text-2xl sm:text-3xl">
Veronika Šmídová
</h6>
- <span class="mb-6 text-grey-300">
+ <span class="mb-4 sm:mb-6 text-grey-300">
Tisková mluvčí
</span>
- <span>
+ <span class="mb-1">
+420 778 111 466
</span>
<span class="text-turquoise-500">
diff --git a/main/styleguide/source/_patterns/templates/contact.mustache b/main/styleguide/source/_patterns/templates/contact.mustache
index add990ea7130be4775a7aabfdc63fbd5690577f5..36b83d50bbab52ad9b159d3696b8b046f4f53050 100644
--- a/main/styleguide/source/_patterns/templates/contact.mustache
+++ b/main/styleguide/source/_patterns/templates/contact.mustache
@@ -77,14 +77,14 @@
</div>
<div class="grid-container no-max">
- <section class="grid-content-with-right-side mb-4 xl:mb-20">
- <h2 class="head-4xl mb-5">
+ <section class="grid-content mb-4 xl:mb-20">
+ <h2 class="head-4xl mb-5 xl:mb-8">
Kontakty pro média
</h2>
- <div class="flex flex-wrap gap-4 justify-center xl:justify-start">
- {{> molecules-contact-person-box }}
+ <div class="flex flex-wrap gap-4 xl:gap-16 xl:justify-start">
{{> molecules-contact-person-box }}
{{> molecules-contact-person-box }}
+ {{> molecules-contact-person-box }}
</div>
</section>
</div>
diff --git a/main/templates/main/main_contact_page.html b/main/templates/main/main_contact_page.html
index 3e057701c11ada4ec9194a16dc74960950d4d3b7..1225c5c15a8a82a3f6226b3728f3850bb1edd76b 100644
--- a/main/templates/main/main_contact_page.html
+++ b/main/templates/main/main_contact_page.html
@@ -65,23 +65,23 @@
</div>
<div class="grid-container no-max">
{% if page.contact_people %}
- <section class="grid-content-with-right-side mb-4 xl:mb-20">
+ <section class="grid-content mb-4 xl:mb-20">
<h2 class="head-4xl mb-5">
Kontakty pro média
</h2>
- <div class="flex flex-wrap gap-4 justify-center xl:justify-start">
+ <div class="flex flex-wrap gap-4 xl:gap-16 xl:justify-start">
{% for contact_person_box in page.contact_people %}
- <div class="flex max-w-sm">
- <div class="mr-2 sm:mr-7">
+ <div class="flex max-w-lg">
+ <div class="mt-6 sm:mt-0 mr-4 sm:mr-7">
{% image contact_person_box.value.person.profile_image fill-250x250 as profile_image %}
<img class="rounded-full shadow-sm w-20 sm:w-40" src="{{ profile_image.url }}"
alt="user image">
</div>
<div class="flex flex-col py-4">
- <h6 class="font-bold text-2xl sm:text-3xl">
+ <h6 class="font-bold mb-2 text-2xl sm:text-3xl">
{{ contact_person_box.value.person.title }}
</h6>
- <span class="mb-6 text-grey-300">
+ <span class="mb-4 sm:mb-6 text-grey-300">
{% if contact_person_box.value.person.position %}
{{ contact_person_box.value.person.position }}
{% else %}
@@ -89,7 +89,7 @@
{% endif %}
</span>
{% if contact_person_box.value.person %}
- <span>{{ contact_person_box.value.person.phone|default_if_none:'' }}</span>
+ <span class="mb-1">{{ contact_person_box.value.person.phone|default_if_none:'' }}</span>
<span
class="text-turquoise-500">{{ contact_person_box.value.person.email|default_if_none:'' }}</span>
{% endif %}