diff --git a/styles/pages/Event.module.scss b/styles/pages/Event.module.scss index 156bcac..7f9f963 100644 --- a/styles/pages/Event.module.scss +++ b/styles/pages/Event.module.scss @@ -16,11 +16,22 @@ position: relative; background-image: url("/vectors/mesh.svg"); background-attachment: fixed; + overflow-x: hidden; + + @include responsive(phone) { + flex-direction: column; + justify-content: center; + padding: 0 32px; + } &-image { width: 40%; height: auto; object-fit: contain; + + @include responsive(phone) { + display: none; + } } &-content { @@ -30,6 +41,13 @@ align-items: flex-start; flex-direction: column; gap: 24px; + + @include responsive(phone) { + width: 100%; + align-items: center; + text-align: center; + gap: 16px; + } } &-title { @@ -51,6 +69,11 @@ 150%, var(--theme-white) ); + + @include responsive(phone) { + width: 100%; + font-size: 16px; + } } &-actions, @@ -59,8 +82,16 @@ display: flex; justify-content: flex-start; align-items: center; - flex-flow: row wrap; gap: 20px; + + @include responsive(phone) { + justify-content: center; + gap: 14px; + } + } + + &-chips { + flex-flow: row wrap; } &-btn { @@ -86,6 +117,11 @@ var(--theme-white), 1px ); + + @include responsive(phone) { + padding: 10px 16px; + font-size: 14px; + } } &-chip {