diff --git a/src/style/molecules/_location.scss b/src/style/molecules/_location.scss index 4d8185e..40ebf62 100644 --- a/src/style/molecules/_location.scss +++ b/src/style/molecules/_location.scss @@ -3,15 +3,6 @@ position: relative; margin-bottom: 48px; - @include breakpoint (sm) { - margin-left: pxVW(72); - margin-right: pxVW(72); - } - @include breakpoint (xl) { - margin-left: 72px; - margin-right: 72px; - } - &, a * { will-change: transform, opacity; } diff --git a/src/style/organisms/_locations.scss b/src/style/organisms/_locations.scss index 4816233..ba88f54 100644 --- a/src/style/organisms/_locations.scss +++ b/src/style/organisms/_locations.scss @@ -42,22 +42,24 @@ min-height: 120px; margin-top: 72px; + @include breakpoint (600px) { + display: grid; + grid-template-columns: repeat(2, 1fr); + } @include breakpoint (sm) { - display: flex; - flex-wrap: wrap; - justify-content: center; + grid-template-columns: repeat(3, 1fr); + grid-column-gap: pxVW(96); + grid-row-gap: pxVW(120); min-height: 200px; margin-top: 112px; margin-bottom: pxVW(120); - // display: grid; - // grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); - // grid-column-gap: 120px; - // grid-row-gap: pxVW(120); } @include breakpoint (md) { margin-bottom: pxVW(232); } @include breakpoint (xl) { + grid-template-columns: repeat(4, 1fr); + grid-column-gap: 120px; margin-bottom: 232px; } }