Gostaria de centralizar o card 1,2 e 3 e colocar o 4 e 5 em baixo, que tipo de alteração faço algo como na img [Cards Projeto (codepen.io)](https://codepen.io/gabrielpaiva/pen/QWxWPNp) ``` TITULO

Equipe

NOME1

Função

NOME2

Função

NOME3

Função

NOME4

Função

NOME5

Função

``` * { ``` padding: 0; margin: 0; } ``` header { ``` width: 100%; height: 120px; background-color: #010138; position: absolute; } ``` header .logo { ``` color: black; font-size: 1px; font-weight: bolder; } ``` header .logo i { ``` color: black; } ``` header div { ``` width: 70%; left: 0; right: 0; margin: auto; } ``` /* este é o cabeçalho todas as configurações de posições das opções para os usuarios estão aqui*/ header .logo { ``` color: black; font-size: 1px; font-weight: bolder; } ``` header .logo i { ``` color: black; } ``` header .cabeçalho-link { ``` padding-left: 100px; cursor: pointer; gap: 3rem; display: flex; padding-top: 20px; font-weight: 500; border-radius: 5rem; color: aliceblue; } ``` header .cabeçalho-link a { ``` color: rgb(255, 255, 255); font-size: 20px; border-radius: 4rem; font-size: 1.7rem; } ``` button { ``` background-color: #FFCC15; color: rgb(0, 0, 0); padding: 5px; width: 150px; border-radius: 15px; font-size: 15px; cursor: pointer; } ``` /* margem e bordas modificadas, para possuir um formato mais oval, incluindo aqui também a cor preta para as letras*/ button:hover { ``` background-color: rgb(99, 78, 0); color: #FFCC15; } ``` /* quando o usuario passar o cursor em cima de cada opção, ele mudará de cor*/ ``` .logo { /*para pode adicionar a logo do meu site*/ height: 100px; width: 60px; padding-top: 49px; padding-left: 720px; padding-right: 220px; display: inline-flex; justify-content: center; text-align: center; align-items: center; cursor: pointer; } .icones { height: 100px; cursor: pointer; gap: 1rem; display: flex; border-radius: 5rem; } ``` header .icones i, header .icones a { ``` cursor: pointer; height: 4.5rem; width: 4.5rem; text-align: center; font-size: 40px; border-radius: 50%; padding: 5rem, 1.5rem; line-height: 4.5rem; } ``` header .icones i:hover, header .icones a:hover { ``` transform: rotate(360deg); border-radius: 20px; transition: 0.5s all; } ``` .sobre .row .content .icones-container .icones span { ``` font-size: 1.5rem; color: var(black); } #iconLogin { float: right; color: white; background: #0D0A97; } #login { display: none; position: fixed; background: white; top: 70px; right: 15%; width: 100px; height: 100px; } ``` /* CARDS */ ``` .main-content { margin: 50px auto; margin-top: 0; padding: 80px; max-width: 1350px; background: #fff; -webkit-box-shadow: 0 20px 100px -15px rgba(0, 0, 0, 0.1); box-shadow: 0 20px 100px -15px rgba(0, 0, 0, 0.1); } .page-title { font-size: 45px; margin: 0 auto 80px auto; margin-top: 150px; } ``` .page-title:after { ``` content: ""; width: 110px; height: 4px; background: #F39745; display: block; margin: 15px auto 0 auto; -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .card { background: #fff; -webkit-box-shadow: 0 2px 30px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 30px rgba(0, 0, 0, 0.1); text-align: center; margin-bottom: 30px; border-radius: 10px; } ``` .card .card_cover { ``` height: 130px; overflow: hidden; background-color: #27408B; } ``` .card .card_padding { ``` padding: 25px; position: relative; margin-top: -85px; } ``` .card .card_image { ``` width: 125px; height: 125px; border-radius: 125px; overflow: hidden; border: 4px solid #FFCC15; margin: 0 auto 15px auto; -webkit-box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1); box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1); } ``` .card .card_image img { ``` width: 125px; height: 125px; -o-object-fit: cover; object-fit: cover; } ``` .card .card_details h3 { ``` font-size: 21px; } ``` .card .card_details p { ``` font-size: 16px; margin-bottom: 15px; } ``` .card .card_social { ``` text-align: center; } ``` .card .card_social a { ``` display: inline-block; } ``` .card .card_social img { ``` width: 33px; margin: 5px 10px; } ``` /* SLIDE CARD */ /* FOOTER */ ``` #muleta { clear: both; } ``` footer { ``` background-color: #010138; } ``` footer a { ``` color: black; text-decoration: none; transition: all 0.3s; } .form-control { background: #212529; border-color: #545454; } ``` .form-control:focus { ``` background: #212529; } ``` @media (max-width:768px) { header .cabeçalho-link { ``` display: list-item; } header .icones { display: list-item; } header .logo { display: auto; max-width: 200px; margin: auto; } header .backgroundFoto { max-width: 200px; margin: auto; } } ![imagem](https://forum.imasters.com.br/monthly_2022_11/card.png.311cceb0e82e5a097a002cb4b5930595.png) ```

gabrielpaiva2

mudar posição do card