@import url("https://fonts.googleapis.com/css2?family=Anybody:wght@500&display=swap");

:root {
  --small-br: 400px;
  --med-br: 600px;
  --magenta: #ff00cd;
  --orange: #ff2c00;
}

.header-section {
  container: header / inline-size;
  color: white;
  /* background: #ededed; */
  padding: 1rem;
  max-width: 1000px;
  /* background: linear-gradient(-45deg, var(--magenta), var(--orange)); */
  border-radius: 0.5rem;
  overflow: hidden; /* for things animating around */
}

.header-layout {
  display: grid;
  grid-template: auto auto auto / 1fr;

  @container (width >= 400px) {
    gap: 1rem;
    grid-template: auto auto / 1.75fr 1fr;
  }

  @container (width >= 600px) {
    grid-template: auto auto / 1.2fr 1fr;
  }
}

.breadcrumbs {
  grid-column: 1 / span 2;
  grid-row: 1;

  @container (width <= 400px) {
    grid-row: 3;
  }

  & a {
    color: inherit;
    text-decoration: none;

    + a:before {
      content: "⇾";
      margin: 0 0.5rem;
    }
  }
}

.header {
  grid-column: 1;
  grid-row: 1;
  font-family: "Anybody", system-ui;
  line-height: 1;
  margin: 0;
  font-size: clamp(2.5rem, 10cqi, 5rem);

  @container (width <= 400px) {
    grid-row: 1;
  }
}

.header2 {
  grid-column: 1;
  grid-row: 2;
  font-family: "Anybody", system-ui;
  line-height: 0.75;
  margin: 0;
  font-size: clamp(5.5rem, 10cqi, 10rem);

  @container (width <= 400px) {
    grid-row: 2;
  }
  animation: pulse 2s infinite;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

.visual {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  margin: 0;

  @container (400px < width < 600px) {
    margin-right: -10cqi;
    margin-bottom: -5cqi;
  }

  @container (width <= 400px) {
    grid-column: 1;
    grid-row: 2;
    margin-top: 1rem;
    margin-bottom: -35cqi;
  }

  @container (width >= 600px) {
    margin-bottom: -15cqi;
  }

  .wide {
    transition-duration: 0.25s;

    @container (width <= 400px) {
      translate: 0 -30px;
    }
  }

  .tablet {
    transition-duration: 0.25s;

    @container (width <= 400px) {
      translate: 90px 0;
    }
  }

  .tall {
    transition-duration: 0.25s;

    @container (width <= 400px) {
      translate: 490px -350px;
    }

    @container (width >= 600px) {
      translate: 350px -260px;
    }
  }
}

body {
  font-family: system-ui;
}