Merge pull request 'feat(index): adiciona estilo para cards de baixo para desktop e mobile' (#15) from feature/bottom-cards into main

Reviewed-on: #15
This commit is contained in:
Nicolly Vieira Santos Costa 2022-10-11 17:59:37 +00:00
commit 735c1a1b65

View File

@ -89,6 +89,7 @@ body {
display: flex;
justify-content: center;
}
.top-cards {
gap: 21px;
@ -157,6 +158,31 @@ body {
width: 100%;
}
/*bottom cards*/
.bottom-cards {
gap: 16px;
width: 92.50%;
margin: 0 auto;
padding-bottom: 108px;
}
.bottom-card {
padding: 35px 32px 45px;
}
.bottom-card-image {
width: 29%;
padding-bottom: 18px;
}
.bottom-card-description {
font-weight: 400;
font-size: 16px;
line-height: 24px;
text-align: center;
}
/*mobile*/
@media screen and (max-width: 1024px) {
@ -202,10 +228,10 @@ body {
/*top cards*/
.cards {
flex-direction: column;
width: 100%;
}
.top-cards {
width: 100%;
padding: 0 30px 80px;
}
@ -217,7 +243,8 @@ body {
font-size: 14px;
}
.top-card-image {
.top-card-image,
.bottom-card-image {
max-width: 150px;
}
@ -229,17 +256,24 @@ body {
.middle-images-wrapper {
top: 32px;
grid-template-areas: "image2 image1" "image3 image3";
column-gap: 14px;
row-gap: 24px;
width: 100%;
}
/*bottom cards*/
.bottom-cards {
padding: 0 23px 89px;
}
}
/*4K*/
@media screen and (min-width: 2500px) {
/*top infocard*/
.top-infocard-subtitle {
font-size: 64px;
@ -252,9 +286,9 @@ body {
}
.top-infocard-description,
.top-card-description {
.top-card-description,
.bottom-card-description {
font-size: 32px;
line-height: 48px;
}
}
}