.documents {
    position: relative;
    list-style: none;
    padding: 0;
    margin: 3rem 5rem;
    /* background-color: coral; */
    
}

.document-item {
    position: relative;
    margin-block: 2rem;
}

.document-item a {
    display: flex;
    align-items: center;
    padding: 1rem;
    /* background-color: aqua; */
    border-radius: var(--radius-xl);
    border: 2px solid var(--clr-text);
}

.document-icon-wrapper {
    position: relative;
    height: 4rem;
    width: 4rem;
    /* overflow: hidden; */
    contain: paint;
    /* background-color: cornsilk; */
    margin-inline: var(--margin-s);
    transition: width .3s ease;
}

.document-icon {
    height: 4rem;
    width: 4rem;
    /* background-color: cornsilk; */
    transition: transform .5s ease;
}

i.document-icon {
    font-size: 4rem;
}

.document-item a:hover .document-icon {
    transform: translateX(-100%);
    transition: transform .2s ease;
}

.document-redirect-icon {
    position: absolute;
    left: 0;
    height: 4rem;
    width: 4rem;
    scale: 1;
    transform-origin: center;
    /* transition: transform .3s ease; */
    /* transform: translateX(130%) translateY(50%) rotate(30deg); */
}

.redirect-arrow {
    transform: translateY(-100%) translateX(80%) rotateZ(45deg) scale(1.3);
    animation: redirect-arrow-out .2s ease backwards;
}

@keyframes redirect-arrow-in {
    from { transform: translateY(-100%) translateX(80%) rotateZ(45deg) scale(1.3); }
    40% { transform: translateY(15%) translateX(-6%) rotateZ(-7deg) scale(.9); }
    65% { transform: translateY(-12%) translateX(4%) rotateZ(3deg) scale(1.1); }
    to { transform: none; }
}

@keyframes redirect-arrow-out {
    from { transform: none; }
    to { transform: translateY(-100%) translateX(80%) rotateZ(20deg) scale(1.3);}
}

.document-item a:hover .redirect-arrow {
    transform: none;
    animation: redirect-arrow-in .5s ease .3s backwards;
}

.redirect-square {
    transform: translateY(110%) translateX(-30%) rotateZ(-30deg);
    transition: transform .3s ease, scale .3s ease;
}
.document-item a:hover .redirect-square {
    transform: none;
    transition: transform .3s ease .1s, scale .3s ease .1s;
}

.document-item a:hover .document-redirect-icon {
    transform: none;
    transition: transform .3s ease .2s;
}

.document-download-icon {
    --_rotation: 0deg;
    position: absolute;
    left: 5px;
    font-size: 4rem;
    scale: .8;
    transform-origin: center;
    transform: rotateZ(var(--_rotation));
    transition: transform .3s ease;
}

.download-arrow {
    top: -65%;
    scale: .3;
    animation: download-arrow-out .2s ease backwards;
}

.download-line {
    bottom: -105% !important;
    scale: .5;
    translate: -4px 0;
    transition: transform .4s ease .1s, scale .3s ease;
}

@keyframes download-arrow-in {
    from { transform: none; scale: .3;}
    40% { transform: translateY(80%) rotateZ(-7deg); scale: .85 }
    65% { transform: translateY(63%) rotateZ(7deg); scale: .75 }
    to { transform: translateY(70%); scale: .8 }
}

@keyframes download-arrow-out {
    from { transform: translateY(70%); scale: .8 }
    to { transform: translateY(-5%); scale: .3;}
}

.document-item a:hover .download-arrow {
    scale: .8;
    transform: translateY(70%);
    animation: download-arrow-in .5s ease .3s backwards;
    /* transition: transform .2s ease .2s, scale .2s ease .25s; */
}

.document-item a:hover .download-line {
    scale: .8;
    transform: translateY(-70%);
}

/* .document-item a:hover .document-icon-wrapper {
    width: 6rem;
} */
/* .document-item a:hover .document-action-icon {
    transform: translateY(50%) rotateZ(var(--_rotation));
} */

.document-description {
    margin-inline: var(--margin-m);
}

@media (max-width: 700px) {
    .documents {
        margin-inline: var(--margin-m);
    }
}