diff --git a/components/Block/Carousel/Carousel.vue b/components/Block/Carousel/Carousel.vue index 0b9dabe..3a8f0a7 100644 --- a/components/Block/Carousel/Carousel.vue +++ b/components/Block/Carousel/Carousel.vue @@ -103,31 +103,13 @@ onMounted(async () => { } } &__controls { - position: relative; - justify-content: center; - left: 0; - right: 0; display: flex; - gap: 30%; - bottom: 80px; - top: auto; - @media (max-width: 1704px) { - bottom: 60px; - top: auto; - } - @media (max-width: 847px) { - bottom: 40px; - top: auto; - } - @media (max-width: 768px) { - top: auto; - bottom: 20px; - gap: 60%; - } + justify-content: center; + gap: 60px; + margin-top: 40px; } &__button { - z-index: 10; color: #333; padding: 8px; &__svg { diff --git a/components/Block/MasonryGrid/MasonryGrid.vue b/components/Block/MasonryGrid/MasonryGrid.vue index 00e8a8f..36acec6 100644 --- a/components/Block/MasonryGrid/MasonryGrid.vue +++ b/components/Block/MasonryGrid/MasonryGrid.vue @@ -38,43 +38,9 @@ const limitedCards = computed(() => { diff --git a/components/Block/MasonryGrid/MasonryGridCard.vue b/components/Block/MasonryGrid/MasonryGridCard.vue index 247e625..2ab090e 100644 --- a/components/Block/MasonryGrid/MasonryGridCard.vue +++ b/components/Block/MasonryGrid/MasonryGridCard.vue @@ -32,23 +32,19 @@ const { data: cardData } = useAsyncData(`masonry-grid-card-${props.uuid}`, () => overflow: hidden; position: relative; height: 290px; - width: 100%; transition: transform 0.3s ease; &.single-card { - min-width: 290px; - flex-grow: 1; + flex: 1 1 290px; + margin: 0 1% 1% 0; } &.double-card { - min-width: 500px; - flex-grow: 2; + flex: 2 1 500px; + margin: 0 1% 1% 0; } img { - position: absolute; - top: 0; - left: 0; width: 100%; height: 100%; object-fit: cover; @@ -64,48 +60,13 @@ const { data: cardData } = useAsyncData(`masonry-grid-card-${props.uuid}`, () => position: absolute; top: 0; left: 0; - z-index: 2; - background-color: rgba(255, 255, 255, 0.8); - padding: 8px; - border-radius: 4px; - margin: 8px; - font-size: 16px; - font-weight: bold; - } -} - -@media (max-width: 911px) { - .masonry-card-content { - &.double-card { - grid-column: span 2; - width: 100%; - } - } -} - -@media (max-width: 819px) { - .masonry-card-content { - &.double-card { - grid-column: span 1; - } - - &.single-card { - min-width: 250px; - } - } -} - -@media (max-width: 768px) { - .masonry-card-content { - height: 180px; - min-width: 100%; - &.single-card { - min-width: 100px; - } - - &.double-card { - min-width: 250px; - } + padding: 28px; + color: var(--Foreground-Normal, #455466); + font-family: Poppins; + font-size: 24px; + font-style: normal; + font-weight: 600; + line-height: 32px; } } diff --git a/components/Block/WallOfLove/Testimonials.vue b/components/Block/WallOfLove/Testimonials.vue index 9f0929f..1a7c00e 100644 --- a/components/Block/WallOfLove/Testimonials.vue +++ b/components/Block/WallOfLove/Testimonials.vue @@ -79,6 +79,14 @@ const logoImageUrl = computed(() => { flex-direction: column; gap: 32px; + @media (max-width: 768px) { + padding: 24px; + } + + @media (max-width: 480px) { + padding: 16px; + } + .header { display: flex; align-items: center; @@ -90,6 +98,11 @@ const logoImageUrl = computed(() => { height: 50px; border-radius: 50%; margin-right: 12px; + + @media (max-width: 480px) { + width: 40px; + height: 40px; + } } .info { @@ -98,18 +111,28 @@ const logoImageUrl = computed(() => { strong { font-size: 1.1em; + + @media (max-width: 480px) { + font-size: 1em; + } } .role { font-size: 0.9em; color: #666; + + @media (max-width: 480px) { + font-size: 0.8em; + } } } } + .quote { margin-bottom: 12px; font-style: italic; flex-grow: 1; + :deep(> *) { quotes: auto; @@ -134,8 +157,16 @@ const logoImageUrl = computed(() => { .company-logo { max-height: 40px; - max-width: 200px; + max-width: 150px; width: auto; + + @media (max-width: 768px) { + max-width: 150px; + } + + @media (max-width: 480px) { + max-width: 100px; + } } .logo-placeholder { @@ -151,6 +182,11 @@ const logoImageUrl = computed(() => { .star-icon { width: 16px; height: 16px; + + @media (max-width: 480px) { + width: 14px; + height: 14px; + } } } } diff --git a/components/Block/WallOfLove/WallOfLove.vue b/components/Block/WallOfLove/WallOfLove.vue index 8803ac2..2c6224e 100644 --- a/components/Block/WallOfLove/WallOfLove.vue +++ b/components/Block/WallOfLove/WallOfLove.vue @@ -62,10 +62,12 @@ const toggleShowAll = () => { align-items: center; .wall-heading { - margin-bottom: 16px; - text-align: center; - font-size: 1.5em; - font-weight: bold; + color: var(--Foreground-Normal, #455466); + font-family: Poppins; + font-size: 24px; + font-style: normal; + font-weight: 600; + line-height: 32px; } .testimonial-container {