@@ -25,9 +25,9 @@ export default function TopMindsSection({
25
25
) }
26
26
{ ...rest }
27
27
>
28
- < div className = "flex flex-wrap max-sm:flex-col sm :*:border-b-0" >
29
- { /* todo: look up socials */ }
30
- < h3 className = "grow pb-6 pr-6 typography-h2" >
28
+ < div className = "mx-auto flex flex-wrap max-sm:flex-col [@media(width<907px)]:gap-y-6 [@media(width>=907px)] :*:border-b-0" >
29
+ { /* todo: remaining socials */ }
30
+ < h3 className = "mr-auto flex text-pretty pb-6 pr-6 typography-h2 [@media(width<907px)]:w-full [@media(width>=907px)]:w-[400px] " >
31
31
Meet the top industry minds
32
32
</ h3 >
33
33
< SpeakerCard
@@ -43,7 +43,7 @@ export default function TopMindsSection({
43
43
src = { elizabethStone }
44
44
linkedin = "elizabeth-stone-608a754"
45
45
/>
46
- < div className = "flex grow border-t border- sec-dark *:border-t-0 max-sm:contents " >
46
+ < div className = "flex grow border-sec-dark [@media(width<907px)]:contents [@media(width>=907px)]:border-t [@media(width>=907px)]: *:border-t-0" >
47
47
< SpeakerCard
48
48
name = "Kamil Kisiela"
49
49
title = "The Guild — Developer"
@@ -64,7 +64,7 @@ export default function TopMindsSection({
64
64
twitter = "tanmaigo"
65
65
linkedin = "tanmaig"
66
66
/>
67
- < div className = "mt-6 flex grow items-end justify-end pl-6" >
67
+ < div className = "mt-6 flex grow basis-[content] items-end justify-stretch pl-6 max-lg:w-full sm:justify-end " >
68
68
< Button variant = "secondary" > View all speakers</ Button >
69
69
</ div >
70
70
</ div >
@@ -91,7 +91,7 @@ function SpeakerCard({
91
91
return (
92
92
< article
93
93
className = { clsx (
94
- ":border-r border-y border-r border-sec-dark first-of-type:border-l" ,
94
+ ":border-r shrink-0 border-y border-r border-sec-dark first-of-type:border-l" ,
95
95
className ,
96
96
) }
97
97
>
@@ -100,7 +100,7 @@ function SpeakerCard({
100
100
alt = ""
101
101
width = { 236 }
102
102
height = { 236 }
103
- className = "aspect-square size-[236px] w-full object-cover transition-transform"
103
+ className = "aspect-square w-full object-cover transition-transform sm:size-[236px] "
104
104
/>
105
105
< div className = "flex items-stretch border-t border-sec-dark" >
106
106
< div className = "flex h-[80px] grow flex-col justify-center gap-1 p-3" >
0 commit comments