*{margin: 0;
padding: 0;
box-sizing: border-box;}

:root{
  --ff-heading: 'Epilogue', sans-serif;
  --ff-texting: 'Open sans', sans-serif;
  /*ff=font-family*/
  --hue:250;
  --bg-primary: hsl(var(--hue), 22%, 20%);
/*hsl= hue, saturation, lumiance*/
  --fc-primary: hsl(var(--hue), 0%,100%);
  --fc-secondary: hsl(var(--hue),50%,80%);
  --fc-secondary-dark: hsl(var(--hue), 100%, 11%, 1);
font: size 62.54%;
/*fs= font-size*/
--fs-body: 1.6rem;
--fs-heading: clamp(4rem, 1rem + 5vw, 5.6rem);
--fs-heading-sm: clamp(2rem, 1rem + 2vw, 5.6rem);
}

.page{
  max-width: clamp(33rem, 30rem + 60vw, 117rem);
  padding: 0 5rem;
  margin: 0 auto;}

  img{
    width: 100%;
    height: auto;
  }

body{
  font-family: var(--ff-heading);
  background-color: var(--bg-primary);
  color: var(--fc-primary);
  font-size: var(--fs-body);
}

header{
  font-family: var(--ff-heading);
  text-align: center;
  margin: 10rem 0 8rem;
  animation: topdown 700ms;
  }
header:hover{
  opacity: 0.8;
  transform: scale(1.1);

}
header h1{
  font-size: var(--fs-heading);
  line-height: 4.8rem;
  font-weight: 800;
}


header p{
  text-transform: uppercase;
  color:var(--fc-secondary);
  letter-spacing:3px;
  letter-spacing: 3px;
  margin-bottom: 1.7rem;
  line-height: 3.2rem;
  font-weight: 400;
}

.card img{
  height:41.6rem;
  object-fit: cover;
  border-radius: 6px;
  transition: all 200ms;
  filter:brightness(0.8) ;
  }

.card img:hover{
  transform: scale(1.1);
  opacity:0.7;
}

.card{
  position: relative;
  font-family:var(--ff-heading);
}

.card h2{
position: absolute;
bottom: 5.2rem;
left:2.8rem;
font-size:var(--fs-heading-sm);
font-weight: 800;
display: flex;
flex-direction: column;
gap:2.8rem;
}

.card h2 span{
  border-radius:2rem;
  background-color: var(--fc-primary);
  font-size: var(--fs-body);
  color: var(--fc-secondary-dark);
  font-weight: 400;
  padding:0 1.6rem;
  height:3.8rem;
  display: inline-flex;
  align-items: center;
  width: fit-content;
}

main{
  display: grid;
  gap: 3.2rem;
  padding-bottom: 10rem;
  animation:downtop 700ms 350ms backwards;
}


@keyframes topdown{
  0%{
    opacity: 0;
    transform: translatey(-15px);
  }
 
  100%{
    opacity: 1;
    transform: translatey(0);
  }
}
@keyframes downtop {
  0% {
    opacity: 0;
    transform: translateY(15px);
  }
  100%{
    opacity: 1;
    transform: translateY(0px);
  }
}
/*para ajustar media, inicie pelo tamanho da pagina*/


@media (min-width: 700px) {

  main {
    grid-template-columns: 1fr 1fr;
  }

}
  
@media (min-width: 1220px) {
  
    main {
      grid-template-areas: "A A B"
      "C D D";
      grid-template-columns: 1fr 1fr 1fr;
    }
  
    main div:nth-child(1) {
      grid-area: A;
    }
  
    main div:nth-child(2) {
      grid-area: B;
    }
  
    main div:nth-child(3) {
      grid-area: C;
    }
  
    main div:nth-child(4) {
      grid-area: D;
    }
  }