diff --git a/src/components/main-content.module.scss b/src/components/main-content.module.scss index c95cfeb..0b8f34b 100644 --- a/src/components/main-content.module.scss +++ b/src/components/main-content.module.scss @@ -21,13 +21,23 @@ a { img { - width: auto; + width: 100%; + height: 16px; + + @media screen and (min-width: 2500px) { + height: 31.25px; + } } } figure { img { - width: auto; + width: 100%; + height: 8px; + + @media screen and (min-width: 2500px) { + height: 15.62px; + } } } @@ -36,6 +46,13 @@ font-size: 12px; line-height: 14px; color: variables.$color-grey; + text-transform: uppercase; + + @media screen and (min-width: 2500px) { + font-weight: 400; + font-size: 24px; + line-height: 28px; + } } } @@ -50,6 +67,11 @@ letter-spacing: 0.1em; text-transform: uppercase; color: variables.$color-black2; + + @media screen and (min-width: 2500px) { + font-size: 48px; + line-height: 56px; + } } @media screen and (max-width: 1024px) { @@ -91,6 +113,11 @@ line-height: 19px; color: variables.$color-grey3; text-decoration: none; + + @media screen and (min-width: 2500px) { + font-size: 32px; + line-height: 38px; + } } .selected { @@ -126,6 +153,11 @@ color: variables.$color-black2; margin-bottom: 12px; + @media screen and (min-width: 2500px) { + font-size: 48px; + line-height: 56px; + } + @media screen and (max-width: 1024px) { text-align: center; } @@ -137,6 +169,13 @@ line-height: 15px; color: variables.$color-grey3; margin-bottom: 12px; + + @media screen and (min-width: 2500px) { + font-size: 26px; + line-height: 30px; + + margin-bottom: 24px; + } } } }