diff --git a/components/DropdownMenu/DropdownMenuItem.module.css b/components/DropdownMenu/DropdownMenuItem.module.css
index 79a78b2a7e..5064a6f9e1 100644
--- a/components/DropdownMenu/DropdownMenuItem.module.css
+++ b/components/DropdownMenu/DropdownMenuItem.module.css
@@ -1,59 +1,62 @@
.wrapper {
display: none;
@media (--nav) {
- display:block;
+ display: block;
}
- @media (--lg-scr)
-{display:initial;}
-
-max-width: min-content;
-&.moreThan {
- @media (max-width:1650px) {
- display:block;
- }
-}
-&.lessThan {
- @media (max-width:1250px) {
- display:block;
+ @media (--lg-scr) {
+ display: initial;
}
-}
+ max-width: min-content;
+ &.moreThan {
+ @media (max-width: 1650px) {
+ display: block;
+ }
+ }
+ &.lessThan {
+ @media (max-width: 1250px) {
+ display: block;
+ }
+ }
}
.styledLink {
cursor: pointer;
- display:flex;
+ display: flex;
flex-direction: row;
- align-items: flex-start;
+ align-items: center;
padding-bottom: 24px;
text-decoration: none;
- color:var(--color-code);
+ color: var(--color-code);
max-width: unset;
@media (--nav) {
max-width: 250px;
+ align-items: flex-start;
}
@media (--lg-scr) {
max-width: none;
}
- &:hover, &:active, &:focus{
+ &:hover,
+ &:active,
+ &:focus {
color: var(--color-dark-purple);
background-color: none;
}
}
.imageItem {
- display:flex;
+ display: flex;
justify-content: flex-start;
flex-direction: row;
- border: 1px solid #F0F2F4;
+ border: 1px solid #f0f2f4;
overflow: hidden;
min-height: 140px;
width: 100%;
min-width: unset;
- box-sizing:unset;
+ box-sizing: unset;
@media (max-width: 1200px) {
flex-direction: column;
}
- @media (max-width:1650px) {
+ @media (max-width: 1650px) {
flex-direction: row;
&.asColumn {
flex-direction: column;
@@ -61,8 +64,8 @@ max-width: min-content;
}
}
.imageBox {
- width:250px;
- height:100%;
+ width: 250px;
+ height: 100%;
max-width: 250px;
flex-shrink: 0;
align-self: center;
@@ -79,9 +82,9 @@ max-width: min-content;
}
.item {
margin-left: 8px;
- @media (--nav) {
- margin-left: 16px;
- }
+ @media (--nav) {
+ margin-left: 16px;
+ }
&.imageitemText {
margin-top: 12px;
margin-bottom: 12px;
@@ -95,45 +98,45 @@ max-width: min-content;
font-size: 14px;
line-height: 18px;
font-weight: 400;
- margin:0;
+ margin: 0;
@media (--nav) {
font-size: 16px;
- line-height: 22px;
- font-weight: bold;
+ line-height: 22px;
+ font-weight: bold;
}
}
.description {
- font-size: 14px;
- line-height: 18px;
- font-weight: 400;
- margin-bottom: 0;
- margin-top:4px;
- color:var(--color-gray);
- display:none;
- @media (--nav){
- display: initial;
- }
+ font-size: 14px;
+ line-height: 18px;
+ font-weight: 400;
+ margin-bottom: 0;
+ margin-top: 4px;
+ color: var(--color-gray);
+ display: none;
+ @media (--nav) {
+ display: initial;
+ }
}
.dateText {
- font-size: 14px;
- line-height: 18px;
- font-weight: 400;
- color:var(--color-gray);
+ font-size: 14px;
+ line-height: 18px;
+ font-weight: 400;
+ color: var(--color-gray);
}
.imageTitle {
- font-size: 20px;
- line-height: 24px;
- font-weight: bold;
- margin-top: 0;
+ font-size: 20px;
+ line-height: 24px;
+ font-weight: bold;
+ margin-top: 0;
}
.paragraph {
- font-size: 14px;
- line-height: 18px;
- font-weight: bold;
- color: var(--color-dark-purple);
+ font-size: 14px;
+ line-height: 18px;
+ font-weight: bold;
+ color: var(--color-dark-purple);
}
.imageItemTitle {
- font-size: 18px;
- line-height: 22px;
- font-weight: bold;
-}
\ No newline at end of file
+ font-size: 18px;
+ line-height: 22px;
+ font-weight: bold;
+}
diff --git a/components/DropdownMenu/DropdownMenuItem.tsx b/components/DropdownMenu/DropdownMenuItem.tsx
index 2901905a49..e038f32e4b 100644
--- a/components/DropdownMenu/DropdownMenuItem.tsx
+++ b/components/DropdownMenu/DropdownMenuItem.tsx
@@ -34,7 +34,7 @@ const DropdownMenuItem = ({
const { imageTitle, customImage } = imageItem || {};
return itemType !== "image" ? (
-
{title}
{description &&{description}
}