diff --git a/qdrant-landing/themes/qdrant-2024/assets/css/partials/healthcare/_healthcare-use-cases.scss b/qdrant-landing/themes/qdrant-2024/assets/css/partials/healthcare/_healthcare-use-cases.scss index 9908648a1..9af93f30c 100644 --- a/qdrant-landing/themes/qdrant-2024/assets/css/partials/healthcare/_healthcare-use-cases.scss +++ b/qdrant-landing/themes/qdrant-2024/assets/css/partials/healthcare/_healthcare-use-cases.scss @@ -21,6 +21,7 @@ display: flex; align-items: center; justify-content: center; + flex-wrap: wrap; position: relative; background-color: $neutral-98; border: 1px solid $neutral-90; @@ -28,7 +29,13 @@ padding: pxToRem(4); margin: 0 auto $spacer * 4; width: fit-content; + max-width: 100%; overflow: hidden; + + @media (max-width: 767px) { + flex-direction: column; + width: 100%; + } } &__tab { @@ -45,6 +52,7 @@ cursor: pointer; transition: color 0.3s ease, background-color 0.3s ease; white-space: nowrap; + text-align: center; &:hover { color: $neutral-40; @@ -56,6 +64,11 @@ background-color: $white; box-shadow: 0 pxToRem(2) pxToRem(8) rgba($neutral-20, 0.1); } + + @media (max-width: 767px) { + width: 100%; + text-align: left; + } } &__slider { @@ -63,14 +76,17 @@ margin-bottom: $spacer * 4; min-height: pxToRem(560); overflow: hidden; + + @media (max-width: 991px) { + min-height: pxToRem(800); + } } &__slide { position: absolute; - top: 50%; + top: 0; left: 0; width: 100%; - transform: translateY(-50%); opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s ease; @@ -81,6 +97,11 @@ visibility: visible; pointer-events: auto; } + + @include media-breakpoint-up(lg) { + top: 50%; + transform: translateY(-50%); + } } &__card { @@ -99,6 +120,12 @@ padding-right: pxToRem(40); padding-top: pxToRem(80); } + + @media (min-width: 992px) and (max-width: 1199px) { + padding-left: pxToRem(40); + padding-right: pxToRem(24); + padding-top: pxToRem(48); + } } &__card-visual { @@ -118,6 +145,13 @@ height: auto; padding: 0; } + + @media (min-width: 992px) and (max-width: 1199px) { + left: pxToRem(24); + top: 50%; + transform: translateY(-50%); + width: pxToRem(220); + } } &__card-visual-img { @@ -131,6 +165,11 @@ max-width: pxToRem(300); max-height: pxToRem(400); } + + @media (min-width: 992px) and (max-width: 1199px) { + max-width: pxToRem(200); + max-height: pxToRem(280); + } } &__card-content { @@ -152,6 +191,13 @@ max-width: pxToRem(620); min-width: pxToRem(500); } + + @media (min-width: 992px) and (max-width: 1199px) { + margin-left: pxToRem(244); + min-width: 0; + max-width: none; + flex: 1; + } } &__card-texture {