.hero-section {
  display: flex;
  flex-direction: column;

  gap: 20px;

  justify-content: center;
  align-items: center;

  position: relative;
  overflow: hidden;

  background-color: transparent;
}

h1,
h3 {
  margin: 0;
  padding: 0;

  pointer-events: none;
  user-select: none;

  color: var(--primary-color);
  font-family: var(--font-family);
}

h1 {
  font-size: 7vw;
  line-height: 70%;

  font-weight: 900;
}

h3 {
  font-size: 1.75vw;
  font-weight: 400;
}

.cat-button {
  padding: 20px 40px;
  color: var(--primary-color);
  background-color: white;

  border: none;

  font-size: 1.25rem;
  border-radius: 5px;

  box-shadow: 10px 15px 48.8px 0px #00000040;
  transition: scale 0.25s;
}

.bg-square-1 {
  position: absolute;

  width: 30%;

  aspect-ratio: 1;

  z-index: -10;

  top: 0%;
  left: 10%;
  gap: 0px;
  rotate: -30deg;

  box-shadow: 50px 30px 130px 0px #00000040;
}

.bg-square-2 {
  position: absolute;

  width: 20%;
  aspect-ratio: 1;

  top: -10%;
  left: 80%;
  gap: 0px;
  rotate: -50deg;

  box-shadow: 50px 30px 130px 0px #00000040;
}

.bg-square-3 {
  position: absolute;

  width: 25%;
  aspect-ratio: 1;

  top: 70%;
  left: 70%;
  gap: 0px;
  rotate: -50deg;

  box-shadow: 50px 30px 130px 0px #00000040;
}

.bg-bottom-effect {
  position: absolute;

  width: 100%;
  height: 10%;

  bottom: 0;

  background: rgb(255, 255, 255);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 100%
  );
}

/* Micro  Interactions */
.cat-button:hover {
  cursor: pointer;
  scale: 1.05;
}

.cat-button:active {
  scale: 1;
}

@media screen and (max-aspect-ratio: 1) {
  h1 {
    font-size: 12vw;
    line-height: 70%;

    font-weight: 900;
  }

  h3 {
    font-size: 3vw;
    font-weight: 400;
  }

  .cat-button {
    font-size: 3vw;
  }
}