diff --git a/assets/styles/main.css b/assets/styles/main.css index 134ff45..be2994b 100644 --- a/assets/styles/main.css +++ b/assets/styles/main.css @@ -111,20 +111,21 @@ body{ align-items: center; max-width: 432px; background: #FFF; + padding: 34px 32px 66px; box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15); } .bottom-card-image{ display: block; - margin: 34px 0 14px; + margin-bottom: 14px; } .bottom-card-description{ + max-width: 368px; font-weight: 400; font-size: 16px; line-height: 24px; text-align: center; - margin: 0px 32px 64px; } @media screen and (max-width: 414px){ @@ -144,6 +145,21 @@ body{ .top-infocard{ padding: 84px 26px 158px; } + + .bottom-cards{ + padding: 0 26px; + margin-top: 134px; + } + + .bottom-cards-wrapper{ + grid-template-columns: 1fr; + gap: 16px; + } + + .bottom-card-description{ + font-size: 14px; + max-width: 302px; + } } @media screen and (min-width: 769px) and (max-width:1200px){ @@ -154,6 +170,10 @@ body{ .top-infocard{ padding-bottom: 96px; } + + .bottom-card-description{ + max-width: 280px; + } } @media screen and (max-width: 992px){ @@ -180,7 +200,6 @@ body{ } .bottom-cards-wrapper{ - grid-template-columns: 1fr; justify-items: center; } }