.hero {
  --accent-color: var(--main);
  display: grid;
  gap: 3rem;
  color: var(--text);
  margin-top: 2rem;
  grid-template-columns: 3fr 2fr;

  .hero__header {
    display: grid;
    align-items: center;
    align-content: baseline;
    gap: 2rem;
    grid-column: 1;
    grid-row: span 2;

    h1 {
      line-height: 1.2;
    }

    h5 {
      color: var(--text-muted);
      font-size: 1rem;
      font-style: italic;
      margin: 0;
    }

    h4 {
      color: var(--text-muted);
    }


    .sub-button {
      display: flex;
      justify-content: center;
      gap: 0.5rem;
      align-items: center;
      margin-top: 1rem;
      color: var(--text-muted);
      padding-inline: 0.5rem;

      i {
        color: var(--brand);
      }
    }

    button {
      --bg-color: var(--brand);
      --color: #FFFFFF;
      padding: 1rem;
      width: 100%;
      font-weight: 700;
      border-radius: 1rem;

      &.secondary {
        --bg-color: var(--surface-2);
        --color: var(--text);
        font-weight: 600;
      }
    }

  }

  @media screen and (max-width: 1023px) {
    .hero__header {
      grid-row: 2;
      grid-column: 1 / span 2;
    }

    .search {
      grid-row: 3;
      grid-column: 1 / span 2;
    }
  }

  .skeleton {
    display: grid;
    justify-content: center;
    margin-right: -32px;
    position: relative;

    img,
    .heroSkeletonSvg {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .hover-text {
      display: grid;
      position: absolute;
      background-color: var(--surface);
      bottom: 14rem;
      left: 0;
      color: var(--brand);
      border-radius: 1.5rem;
      padding: 1rem;
      font-weight: 600;
      font-size: 1.5rem;

      small {
        font-weight: 400;
        font-size: 1rem;
      }
    }
  }

  @media screen and (min-width: 1024px) {
    &.hero {
      display: grid;
      grid-template-columns: 3fr 2fr;

      h1,
      h4 {
        grid-column: 1;
      }

      .skeleton {
        grid-column: 2;
        grid-row: 1 / span 3;
        justify-self: end;

        .hover-text {
          bottom: 13rem;
          right: 9rem;
          left: -3rem;
        }

        img,
        .heroSkeletonSvg {
          margin-right: unset;
        }
      }

      .buttons {
        grid-column: 1;
        align-content: baseline;
      }
    }
  }
}