.arrow {
    max-width: 6.4rem;
    aspect-ratio: 1 / 1;
    /* background-color: cyan; */
}
.arrow svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* background-color: red; */
}
.arrow svg .outer {
    transform: translateY(50%);
}
.arrow.big {
    max-width: 9.6rem;
    width: 9.6rem;
    padding: 0.6rem;
}
.arrow.arrow-up {
    transform: rotate(180deg);
}
.arrow.arrow-down {
    transform: rotate(0deg);
}
.arrow.arrow-left {
    transform: rotate(90deg);
}
.arrow.arrow-right {
    transform: rotate(270deg);
}
.arrow.arrow-right-down {
    transform: rotate(315deg);
}

.arrow-1, .arrow-2 {
    transform: translate(0) scale(1);
    transition: transform 0.35s var(--default-animation);
    transform-origin: center;
}
.arrow-2 {
    transform: translateY(-100%) scale(0.1);
}
.arrow:hover .arrow-1, .arrow-hover:hover .arrow-1 {
    transform: translateY(70%) scale(0.1);
}
.arrow:hover .arrow-2, .arrow-hover:hover .arrow-2 {
    transform: translateY(0) scale(1);
}