body {
    background: var(--main-alpha);
    color: #fff;
}

.hero {
    position: relative;
    background: var(--main-bravo);
    text-align: center;
    color: #000;
    padding: clamp(2rem, calc(2rem + ((1vw - 0.32rem) * 2.2727)), 4rem) 0;
}

.hero::before, .hero::after {
    position: absolute;
    content: "";
    height: 1.2rem;
    width: 100%;
    top: -.1rem;
    left: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 424.52 9.85' xmlns:v='https://vecta.io/nano'%3E%3Cpath d='M0 0v5.56c1.63-.53 4.82-.34 6.2-.25-.95.31 4.97 1.72 5.9 1.13-1.1-.72 4.62-.86 5.95.2.9-.26 8.14.52 5.83.65-.43.19 6.38.66 6.02.22-.5-.08 5.52-.55 5.52.04 0-.53 5.45 0 5.45.49 0 .57 5.61-1.78 5.61-.6 0-1.03 5.62-2.12 5.62-.7 0-.32 5.24 1.24 5.24 1.92 0 .61 5.52 2.34 5.52.04 0-.03 5.67-.52 5.67-1 0 .15 5.58.29 5.58-.37 0-.93 5.73.71 5.73.94 0-.94 5.93.65 5.93-.49 0 .73 5.72 2.88 5.72 1.2 0-.13 6-2.28 6-1.56 0 1.1 5.75 1.27 5.75 1.49 0-1.83 5.87-.61 5.87-.84 0-.12 5.86.75 5.86.57 0-.37 5.78-.53 5.78-.81 0 .48 5.95.9 5.95.67 0-.26 6.04 1.4 6.04.53 0-.12 5.93.45 5.93-.16s5.62-1.04 5.62-.61c0 .63 4.77-2.08 4.77-2.29 0-1.27 6.51 1.43 6.51 1.42 0-.8 5.77.17 5.77-.1 0 .13 5.02-1.49 5.02-1.65 0-.11 5.5.69 5.5-.75 0-.37 5.71-.57 5.71-.33 0-.79 6.07.93 6.07 1.2 0-.43 5.5-.23 5.5-1.29 0 .09 5.71-.13 5.71.79 0-.02 5.61-.47 5.61.19 0-.36 5.93-.96 5.93-.44 0-1.4 6.39-.9 6.39.62 0-.84 6.83.3 6.83-.1 0 .52 5.82 1.06 5.82 1.36 0-.31 5.18 1.29 5.18 1.5 0-1.99 5.82-.25 5.82-.71 0-.53 5.6.8 5.6-.04 0-1.15 5.76.74 5.76.65 0-.44 5.05-1.96 5.05-2.03 0-.22 5.71 1 5.71.33 0 .36 5.33-.84 5.33-.73 0-.4 5.48-1.07 5.48-.38 0 .86 5.41-.84 5.41.42 0 .41 5.52-.34 5.52.19 0-.36 5.07-2.02 5.07-.74 0 .58 2.69-.89 2.69-2.44 0 .25 6.08.56 6.08.33 0 .1 5.46-.07 5.46.11 0 .2 5.84-2.42 5.84-1.85 0-.25 5.64.07 5.64.89 0-.4 5.89.16 5.89.17 0-.76 4.78 1.33 4.78 1.64 0 .66 5.06 1.53 5.06 1.25 0-1.47 6.05-1.07 6.05-.58 0 .77 5.56 1.5 5.56.26 0-.09 5.69.51 5.69-.26 0-.82 5.36.11 5.36 1.16 0 .26 5.74-.77 5.74-.92 0-.01 5.55 2.02 5.55.3 0 1.8 5.58.87 5.58.16s6.89.8 5.62 1.22c1.22-.53 4.52.08 5.63.29-.29.87 4.05-.15 5.58-.79.87.66 5.17-1.11 5.59-.21 2.49-.13 6.49 1.05 5.34.18 5.18-.39 7.6-.87 5.18-1.33.7-.25 5.66.75 5.62 1.04.7-.38 3.68-2.46 4.82-1.56.83-.13 3.84.42 5.08.75 1.66.05 5.16.2 5.75-.25-2.31-.63.66-.46 3.99-.42V0H0z' fill='%23090f14'/%3E%3C/svg%3E");
    filter: drop-shadow(.1rem 0.4rem 1.6rem #010a117b) drop-shadow(.1rem .1rem .2rem #010a11e4);
    background-repeat: repeat-x;
}

footer::before {
    display: none;
}

.hero::after {
    top: auto;
    bottom: -.1rem;
    transform: rotate(180deg);
}

.hero p {
    font-size: clamp(1.6rem, calc(1.6rem + ((1vw - 0.32rem) * 0.2273)), 1.8rem);
    font-weight: bold;
}

h1 {
    font-family: 'CallOfOpsDuty';
    font-size: clamp(2.6rem,calc(2.6rem + ((1vw - 0.32rem) * 5.2632)),4.6rem);
    line-height: 1.1;
    font-weight: 100;
}

h2 {
    text-align: center;
    margin: 6rem 0 4rem;
}

.cat-list-cont {
    margin: 3rem 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.selected-category {
    background: #003bb1!important;
    box-shadow: inset 0 0 2rem #05f, 0 0 2rem #0055ffb3;
}

.results-cont {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.results-cont:after {
    content: "";
    display: block;
    margin-left: 33%;
}

.post-link-cont {
    width: 33%;
    border: 0.1rem solid rgba(255, 255, 255, 0.07);
    margin-bottom: 5rem;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
}

a {
    text-decoration: none;
}

.post-link-cont:hover > .images {
    filter: contrast(1.2);
}

.image-wrapper {
    height: 35rem;
    width: 100%;
}

.wp-post-image {
    border: .1rem solid #ffffff6e;
    object-fit: cover;
    height: 35rem;
    width: 100%;
}

.post-link-cont h3 {
    color: var(--main-charlie);
    font-size: clamp(2.4rem, calc(2.4rem + ((1vw - 0.32rem) * 0.3409)), 2.7rem);
    letter-spacing: .1rem;
    margin: 1rem auto auto auto;
    font-weight: bold;
    line-height: 1.1;
    backface-visibility: hidden;
    text-shadow: 0.1rem 0.1rem 0.5rem #000000b8;
    width: 90%;
    text-align: center;
}

h3 a {
    text-decoration: none;
}

.post-link-cont p {
    font-size: 1.6rem;
    margin-bottom: 1.5rem;
}

.articles-results button {
    color: #fff;
    margin: 1rem;
    padding: 1.1rem 1.5rem;
    cursor: pointer;
    background: #010a11;
    border: .2rem solid #05f;
    letter-spacing: .3rem;
    word-spacing: .3rem;
    outline: .1rem solid #05f;
    transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Open Sans', 'Helvetica Neue', 'sans-serif';
}

.articles-results button:hover, .read-more:hover {
    box-shadow: inset 0 0 2rem #05f, 0 0 2rem #0055ffb3;
    outline-offset: 1.5rem;
}

.read-more {
    display: block;
    width: 90%;
    text-align: center;
    font-size: 1.5rem;
    color: #fff;
    margin: 4rem auto 0 auto;
    padding: 1.1rem 1.5rem;
    background: #010a11;
    border: 0.2rem solid #05f;
    letter-spacing: .3rem;
    word-spacing: 0.3rem;
    outline: 0.1rem solid #05f;
    transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Open Sans', 'Helvetica Neue', 'sans-serif';
    text-decoration: none;
}

.load-more-link-cont {
    margin-bottom: 7rem;
}

.load-more {
    width: 100%;
    max-width: 20rem;
    display: block;
    text-align: center;
    font-size: 1.5rem;
    color: #fff;
    margin: 4rem auto 0 auto;
    padding: 1.1rem 1.5rem;
    background: #010a11;
    border: 0.2rem solid #05f;
    letter-spacing: .3rem;
    word-spacing: 0.3rem;
    outline: 0.1rem solid #05f;
    transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Open Sans', 'Helvetica Neue', 'sans-serif';
    text-decoration: none;
    cursor: pointer;
}

.load-more:hover {
    box-shadow: inset 0 0 2rem #05f, 0 0 2rem #0055ffb3;
    outline-offset: 1.5rem;
}

@media only screen and (max-width: 992px) {
    .wp-post-image {
        height: 30rem;
    }
    .post-link-cont {
        width: 49%;
        max-width: 45rem;
    }
}

@media only screen and (max-width: 768px) {
    .wp-post-image {
        height: 25rem;
    }
}

@media only screen and (max-width: 640px) {
    .wp-post-image {
        height: 30rem;
        width: 100%;
        max-width: 45rem;
        margin: auto;
    }
    .post-link-cont {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .results-cont {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

@media only screen and (max-width: 479px) {
    .post-link-cont {
        width: 100%;
        align-items: center;
    }
}