header {
  position: relative;
  display: flex;
  justify-content: center;
}
header > .header-bg {
  position: absolute;
  width: 100%;
  height: 60rem;
  overflow: hidden;
  background: radial-gradient(
    circle 150rem,
    color-mix(
      in srgb, 
      var(--color-acent) 35%, 
      var(--color-black)
    ),
    var(--color-black)
  );
}
header > .header-bg > * {
  position: absolute;
  width: 100%;
  height: 100%;
}
header .header-shadow {
  background: linear-gradient(
    187deg, rgba(0, 0, 0, 0.3), 
    var(--color-black) 80%
  );
}
header .header-books {
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:14rem;
  grid-template-rows:repeat(3, 20rem);
  gap:1rem;
  padding:1rem;
  will-change:transform;
}
header .book{
  width:100%;
  height:100%;
  border-radius:0.6rem;
  overflow: hidden;
  background-color: color-mix(
    in srgb, 
    var(--color-acent) 20%, 
    transparent
  );
}
header .book img{
  width:100%;
  height:100%;
  object-fit:cover;
}
header .header-text {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 10rem 0 7rem 0;
  z-index: 1;
}
header .header-text > * {
  max-width: 54rem;
}
header .header-text h1 {
  font-family: 'Akshar';
  font-size: 8rem;
  font-weight: 900;
  line-height: 1;
}
header .header-text h1 > span {
  color: var(--color-acent);
}
header .header-text p {
  margin-top: 2rem;
  font-size: 1.6rem;
}
header .store {
  display: flex;
  gap: 2rem;
  margin-top: 3rem;
}
header .store > a {
  display: flex;
  gap: 1rem;
  padding-left: 1.5rem;
  align-items: center;
  text-align: start;
}
header .store .icon {
  font-size: 3rem;
}
header .store h2 {
  font-size: 2rem;
  font-weight: 500;
}
header .store .app-store {
  background-color: var(--color-white);
  color: var(--color-black);
}
@media (max-width: 420px) {
  header .store {
    flex-direction: column;
  }
}