header {
  display: grid;
  width: 100%;
  max-width: 1000px;
  grid-template:
    ". middle ." 1fr
    "left middle right" 1fr
    "left logo right" 1fr
    ". logo ." 2fr / 1fr 3fr 1fr;
  align-items: center;
  justify-items: center;
  gap: 1rem;
  column-gap: 2rem;
  height: 50vh;
  position: relative;


  #logo {
    grid-area: logo;
    width: 100%;
    max-height: 100%;
    aspect-ratio: 2 / 1.5;
    z-index: 10;
  }

  #left {
    grid-area: left;
    width: 100%;
    aspect-ratio: 1 / 1.5;
    transform: translate(0%, 20%) rotate(50deg);
  }

  #middle {
    grid-area: middle;
    height: 100%;
    aspect-ratio: 1.5 / 1;
  }

  #right {
    grid-area: right;
    width: 100%;
    aspect-ratio: 1 / 1.5;
    transform: translate(0%, 20%) rotate(-50deg);
  }

  #arc {
    position: absolute;
    top: 13rem;
    width: 55%;
    height: 12rem;
    border-top: solid 6px var(--logo-border-color);
    border-radius: 100px;
    corner-shape: bevel;
    z-index: 0;
  }

  img {
    border-radius: 20px;
    corner-shape: bevel;
    max-height: 13rem;
  }

  svg:hover {
    animation: grow 5s ease infinite;
  }
}

@media (max-width: 900px) {
  header {
    grid-template:
      "left middle right" 25%
      "logo logo logo" 75% / 1fr 1fr 1fr;
    gap: 0;
    align-items: start;

    #middle {
      width: 100%;
      height: unset;
    }

    #left,
    #right {
      transform: unset;
      aspect-ratio: 1.5 / 1;
    }

    #arc {
      display: none;
    }

    img {
      border-radius: 0 0 20px 20px;
    }

    svg:hover {
      animation: shrink 5s ease infinite;
    }
  }

  body {
    padding: 0;
  }
}

@keyframes grow {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.3);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes shrink {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.7);
  }

  100% {
    transform: scale(1);
  }
}