diff --git a/frontend/stylesheets/components/_list-sponsor.scss b/frontend/stylesheets/components/_list-sponsor.scss index 48744c7..7feeb67 100644 --- a/frontend/stylesheets/components/_list-sponsor.scss +++ b/frontend/stylesheets/components/_list-sponsor.scss @@ -1,9 +1,11 @@ +@use '../variables'; + .list-sponsor { @include make-row(); &__company { @include make-col-ready(); - @include make-col(6); + @include make-col(4); display: flex; justify-content: center; @@ -18,11 +20,21 @@ } &__logo { - max-width: 100%; + width: 100%; } & + & { - margin-top: 2rem; + @include media-breakpoint-up('sm') { + margin-top: 1rem; + } + } + + & + &:not(:last-child) { + margin-bottom: 1rem; + + @include media-breakpoint-up('sm') { + margin-bottom: 2rem; + } } } @@ -64,4 +76,19 @@ text-align: left; } } + + &.list-sponsor--gold { + .list-sponsor__company { + padding-top: 2rem; + padding-bottom: 2rem; + } + } + + &.list-sponsor--silver { + .list-sponsor__info { + @include media-breakpoint-up('sm') { + font-size: map-get(variables.$font-sizes, 'sm'); + } + } + } } diff --git a/frontend/stylesheets/screens/_home.scss b/frontend/stylesheets/screens/_home.scss index bca23ac..d52fb03 100644 --- a/frontend/stylesheets/screens/_home.scss +++ b/frontend/stylesheets/screens/_home.scss @@ -35,7 +35,27 @@ body.home .list-sponsor { padding-left: 0; @include media-breakpoint-up('sm') { - width: 65%; - margin: 0 auto; + margin-inline: auto; + } + + &.list-sponsor--silver { + @include media-breakpoint-up('sm') { + width: 75% + } + } + + &.list-sponsor--silver { + margin-left: 25%; + + @include media-breakpoint-up('sm') { + width: 50%; + margin-left: auto; + } + + .list-sponsor__company { + @include media-breakpoint-up('sm') { + @include make-col(6); + } + } } } diff --git a/src/_components/list_sponsor.liquid b/src/_components/list_sponsor.liquid index 2e32c93..6be7a5e 100644 --- a/src/_components/list_sponsor.liquid +++ b/src/_components/list_sponsor.liquid @@ -1,4 +1,4 @@ -