body {
  background-color: #EEF9BF;
  font-family: 'Roboto', sans-serif;
}

header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 40px;
  margin-bottom: 47px;
  font-weight: 700;
font-size: 56px;
line-height: 66px;
letter-spacing: -0.004em;
color: #75B79E;
}

.carta-atras,
.carta-frente{
  width: 117px;
height: 146px;
background: #A7E9AF;
border: 1px solid #99CEA8;
box-sizing: border-box;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
}

.cartas{
  display: flex;
  transform-style: preserve-3d;
  transition: all 1s linear;
}
.carta-atras {
  position: absolute;
  z-index: 1; 
  backface-visibility: hidden;
}

.cartas.selecionado {
  transform: rotateY(180deg);
}



.carta-frente {
  background-color: white;
  position: relative;
}

.layout1 {
width: 100%;
height: auto;
display: flex;
justify-content: center;
align-items: center;
gap: 34px;
margin-bottom: 34px;
}

.layout2 {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 34px;
  margin-bottom: 34px;
  }

  .layout3 {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 34px;
    }

    .tudao {
      display: grid;
      grid-template-columns: 0fr 0fr 0fr 0fr 0fr;
      grid-auto-rows: minmax(40px, auto);
      grid-gap: 34px;
      justify-content: center;
      align-items: center;
    }

    @media screen and (max-width: 600px) {

h1 {
  display: flex;
  width: 312px;
  height: 63px;
  font-weight: 700;
 font-size: 36px;
 line-height: 42px;
 justify-content: center;
 text-align: center;
 letter-spacing: -0.004em;
color: #75B79E;
}

.layout1 {
  display: flex;
  flex-direction: column;
}

.layout2 {
  display: flex;
  flex-direction: column;
}

.layout3 {
  display: flex;
  flex-direction: column;
}

.tudao {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
    }