.blog > .page-header,
.blog-featured > .page-header {
    margin-bottom: var(--regular);
    text-align: center;
}

.blog,
.blog-featured {
    padding: var(--article-margin);
}

div.blog-items {
    align-items: center;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin: 0 auto;
    width: var(--blog-wrapper);
}

div.blog-items div.blog-item {
    margin-bottom: var(--gap);
    width: calc((var(--blog-wrapper) / var(--cols)) - var(--gap) / var(--cols));
}

div.blog-items div.blog-item img {
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
    width: 100%;
}

div.intro {
    position: relative;
}

div.intro div.header {
    background-color: var(--kdp-green);
    bottom: var(--double);
    border-bottom-left-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
    color: var(--white);
    height: 180px;
    padding: var(--regular-half) var(--double);
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

div.intro div.header {
    font-size: calc(var(--small) + 0.2vw);
}

div.intro div.header h2 {
    font-size: calc(var(--small) + 0.6vw);
    margin-bottom: 0;
}

div.intro div.header a {
    color: var(--white);
    text-decoration: none;
}

div.intro div.header a:hover {
    text-decoration: underline;
}


div.intro div.header div.extended {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-top: var(--regular);
}

.w-100 {
    text-align: center;
}

.w-100 .counter {
    margin-bottom: var(--thin);
}

.w-100 ul.pagination {
    margin: 0;
    padding: 0;
}

.w-100 ul.pagination li {
    border-radius: 5px;
    display: inline-block;
    padding: 0 var(--half);
}

.w-100 ul.pagination li.active {
    border: 1px solid var(--kdp-green);
}

.w-100 ul.pagination li.active a {
    font-family: var(--myriad-bc);
}

.w-100 ul.pagination li a {
    text-decoration: none;
}

.w-100 ul.pagination li a:hover {
    text-decoration: underline;
}

/* Current displays */
@media only screen and (max-width: 1280px) {
    :root {
        --cols: 2;
        --gap: 32px;
    }
}

/* Old desktops */
@media only screen and (max-width: 1024px) {
    :root {
        --blog-wrapper: 90vw;
    }

    div.intro div.header {
        padding: var(--regular-half) var(--regular);
    }

    div.intro div.header h2 {
        font-size: calc(var(--regular) + 0.9vw);
    }

}

/* Tablet */
@media only screen and (max-width: 767px) {
    :root {
        --blog-wrapper: 100vw;
        --cols: 1;
    }

    div.intro div.header {
        padding: var(--regular-half) var(--regular);
    }

    div.intro div.header h2 {
        font-size: var(--double);
    }

}

/* Mobile */
@media only screen and (max-width: 479px) {
    div.intro div.header h2 {
        font-size: calc(var(--regular) + 0.9vw);
    }
}