_pagination.scss

.pagination-container {
    &.grid-item {
        grid-column:    2 / 3;
        align-self:     center;
        justify-self:   center;
    }
}

.rss-posts-container {
    &.grid-item {
        grid-column:    3 / 4;
        align-self:     end;
        justify-self:   end;
    }
}

.page-navigation {
    &.grid-container {
        display:                grid;
        grid-template-columns:  30fr auto 30fr;
        align-items:            center;
        
        @include max-content-width;
        @include use-margins-to-center;
    }

    @include font-large;
    display:            flex;
    flex-direction:     row;
    justify-content:    center;
    align-items:        center;

    span {
        display:        table-cell;
        padding:        0.25rem;
        margin-left:    0.1rem;
        margin-right:   0.1rem;
        text-align:     center;
        vertical-align: middle;
        width:          3rem;
    }

    a {
        color:          $color-helmholtz-blue;

        &:focus,
        &:hover {
            color:      $color-helmholtz-bright-blue;
        }
    }
}

/*
    Paginations usually have a list of items, they show.
    The entries are commonly subdivided into a preview of the item in question
    and a digest of its metadata.
*/
.list-entry {
    display: flex;
    flex-direction:  row;
    align-items:     flex-start;
    justify-content: flex-start;

    @include medium-is-tablet-minus {
        flex-direction: column;
    }

    .preview {
        flex-basis:         50%;
        flex-shrink:        0;

        padding-right:      1rem;

        @include medium-is-tablet-minus{
            padding-right:  0;
        }
    }
}