diff --git a/src/app/pages/Designathons/Designathon24/components/Speakers/Speakers.module.scss b/src/app/pages/Designathons/Designathon24/components/Speakers/Speakers.module.scss index cde601a1..b4ea3d4b 100644 --- a/src/app/pages/Designathons/Designathon24/components/Speakers/Speakers.module.scss +++ b/src/app/pages/Designathons/Designathon24/components/Speakers/Speakers.module.scss @@ -37,7 +37,16 @@ flex-direction: column; justify-content: center; gap: 4rem; - max-width: 80%; + + @media screen and (min-width: 640px) { + max-width: 80%; + } + + @media screen and (min-width: 1280px) { + max-width: unset; + margin-top: 5rem; + gap: 8rem; + } .polaroidHeading { position: relative; @@ -61,39 +70,42 @@ text-align: center; .keynotePolaroid { - width: 70%; background: no-repeat center; background-size: contain; display: grid; place-content: center; + @media screen and (min-width: 640px) { + width: 90%; + } .content { margin: 0 auto; - width: 70%; + width: 80%; } } } .people { display: grid; - grid-template-columns: repeat(2, 1fr); - row-gap: 3rem; - column-gap: 1rem; + grid-template-columns: repeat(1, 1fr); + row-gap: 2rem; + max-width: min(350px, 80%); + margin: auto; + + @media screen and (min-width: 640px) { + grid-template-columns: repeat(2, 1fr); + max-width: unset; + } @media screen and (min-width: 768px) { - column-gap: 3rem; + column-gap: 2rem; } @media screen and (min-width: 1280px) { grid-template-columns: repeat(3, 1fr); } } - - @media screen and (min-width: 1280px) { - margin-top: 5rem; - gap: 8rem; - } } @media screen and (min-width: 640px) {