(Squarespace) Change position of arrows in Event Detail

To change position of arrows in Event Detail. Like this.

We will have.

Use CSS code like this.

section.item-pagination[data-collection-type^="events"] {
  & {
    flex-direction: row-reverse;
}
a.item-pagination-link.item-pagination-link--prev {
    &{
    flex-direction: row-reverse;
     text-align: right;
    margin-right: 0 !important;
        margin-left: auto !important;
}
     h2 {
        padding-right: 20px;
    }
svg {
    transform: rotate(-180deg);
}
div {
    padding-right: 0px;
}
}
a.item-pagination-link.item-pagination-link--next {
    & {
    flex-direction: row-reverse;
    text-align: left;
        margin-left: 0px !important;
        margin-right: auto !important;
}
    h2 {
        padding-left: 20px;
    }
svg {
    transform: rotate(-180deg);
}
    div {
        padding-left: 0px;
    }
  }}