* {
  margin: 0;
  box-sizing: border-box;
}
:root {
  --primary-color: rgb(212, 228, 225);
  --headline: hsla(210,11%,15%,1);
  --paragraph: rgb(248, 250, 252);

  font-size: 62,5%; /* 100% = 16px, 62.5% = 10px* - 1 rem = ao valor configurando */
}
body{
  font-family:'DM Sans';
  font-size: 1.6rem;
  text-align: center;
  background-image: url(/assets/bgiPadrao.jpg) ;
  background-position: top center;
  background-size: cover;

}

header{
  width: 37.5rem;
  margin-right: auto;
  margin-left: auto;

  padding-right: 2rem;
  padding-left: 2rem;

  margin-top: 4.1rem;
}

h1{
  font-size: 3.4rem;
  color: var(--headline);
  line-height: 130%;

  margin-bottom: 2.4rem;
}
h4{
  font-size: 1.4rem;
  color: var(--primary-color);
  margin-bottom: 1.6rem ;
}
p{
  font-size: 1.8rem;
  line-height: 150%;
  font-weight: 400;
  color: var(--paragraph);

  margin-bottom: 3.2rem;
}
button{
  background: var(--primary-color);
  border: none;
  border-radius: 4rem;
  margin-bottom: 6rem;

  height: 6.2rem;
  width: 26.3rem;

  color:white;
  text-transform: uppercase;
  font-size: 1.4rem;
  font-weight: 700;

  display: flex; /*Tira a formatação de box dentro*/
  align-items: center;
  justify-content: center;
  gap: 1.6rem; /* espacamento entre os elementos */
  margin-left: auto;
  margin-right: auto;

}
button:hover {
  cursor: pointer;
}
footer{
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  color: white;
  text-align: left;
  font-size: 1rem;
}
[style*="--aspect-ratio"] > :first-child {
  width: 100%;
}

[style*="--aspect-ratio"] > img {
  height: auto;
}

@supports (--custom:property) {
  [style*="--aspect-ratio"] {
    position: relative;
  }

  [style*="--aspect-ratio"]::before {
    content: "";
    display: block;
    padding-bottom: calc(100% / (var(--aspect-ratio)));
  }

  [style*="--aspect-ratio"] > :first-child {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
  }
}