// Nothing to see here. We do clean after ourselves

section {
    padding: 20px 0;
}

// @todo no more shame

.screen-reader-text {
    display: none;
}

@font-face {
    font-family: 'overpass';
    src: url('assets/fonts/overpass/overpass-regular.eot');
    src: url('assets/fonts/overpass/overpass-regular.woff2') format('woff2'),
    url('assets/fonts/overpass/overpass-regular.woff') format('woff'),
    url('assets/fonts/overpass/overpass-regular.ttf')  format('truetype');
}

body * {
    font-family: overpass, sans-serif;
}

.c-read-more-arrow-line {
    content: "";
    position: absolute;
    width: 84px;
    height: 2px;
    background-color: white;
    margin-top: 11px;
}

.c-read-more-arrow-head {
    content: "";
    position: absolute;
    display: block;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid white;
    margin-top: -18px;
}

.c-hero_read_more > a:before {
    @extend .c-read-more-arrow-line;
    left: 265px;
    margin-top: 12px;
}

.c-hero_read_more > a:after {
    @extend .c-read-more-arrow-head;
    margin-top: -17px;
    left: 349px;
}

.c-card:nth-child(4n+1) .hero_read_more > a:before, .c-card:nth-child(4n-1) .hero_read_more > a:before {
    @extend .c-read-more-arrow-line;
    left: 315px;
}

.c-card:nth-child(4n+1) .hero_read_more > a:after, .c-card:nth-child(4n-1) .hero_read_more > a:after {
    @extend .c-read-more-arrow-head;
    left: 399px;
}

.c-card:nth-child(4n-2) .hero_read_more > a:before {
    @extend .c-read-more-arrow-line;
    left: 745px;
}

.c-card:nth-child(4n-2) .hero_read_more > a:after {
    @extend .c-read-more-arrow-head;
    left: 829px;
}

.c-card:nth-child(4n) .hero_read_more > a:before {
    @extend .c-read-more-arrow-line;
    left: 1165px;
}

.c-card:nth-child(4n) .hero_read_more > a:after {
    @extend .c-read-more-arrow-head;
    left: 1249px;
}