@media screen and (max-width: 640px) {
    .news-header {
        padding: 10px var(--spacing-outer) 0 var(--spacing-outer);
        position: relative;
        background-color: var(--color-black);
        color: var(--color-white);
        perspective: 100vw;
        perspective-origin: 50% 30%;
        background: radial-gradient(farthest-corner at 50% 100%, #00504b, #32001f00 60%)
    }

    .news-header .news-header--has-bg-image {
        background: none
    }

    .news-header .bgimg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 70vh;
        z-index: -1
    }

    .news-header .bgimg img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        display: block;
        margin: 0;
        opacity: .5;
        mix-blend-mode: overlay;
        image-rendering: pixelated
    }

    .news-header .bgimg:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(0deg, var(--color-black) 0%, rgba(0, 0, 0, 0) 100%);
        z-index: 0;
        pointer-events: none
    }

    .news-header .news-header-content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border-bottom: 2px solid var(--color-white)
    }

    .news-header .category {
        font-size: 1.44vw;
        margin-bottom: 1em
    }

    .news-header .news-header-title {
        font-weight: 400;
        font-size: 2em;
        margin-top: 0;
        margin-bottom: .75em
    }

    .news-header .news-header-subhead {
        font-family: var(--font-headline);
        font-size: 2rem;
        line-height: 1.2;
        letter-spacing: -.02em;
        max-width: 50vw;
        color: var(--color-accent);
        margin-bottom: 1em
    }

    .news-header .news-header-subhead:last-child {
        margin-bottom: 0
    }

    .news-header .news-header-search {
        order: 3;
        flex: 1 1 40%;
        display: flex;
        gap: 1em;
        padding: 1em 0 .5em
    }

    .news-header .news-header-search label {
        width: 100%;
        display: flex;
        align-items: center;
        gap: .5em
    }

    .news-header .news-header-search-input {
        width: 0;
        height: 100%;
        padding: .3em 0;
        border: none;
        background-color: var(--color-white);
        color: var(--color-black);
        font-size: 16px;
        transition: all .2s ease-out;
        font-family: var(--font-headline)
    }

    .news-header .news-header-search-input::-moz-placeholder {
        color: var(--color-black);
        font-family: var(--font-headline);
        font-size: 16px
    }

    .news-header .news-header-search-input::placeholder {
        color: var(--color-black);
        font-family: var(--font-headline);
        font-size: 16px
    }

    .news-header .news-header-search-input:not(:-moz-placeholder-shown) {
        width: calc(100% - .6em);
        padding: .3em .6em;
        outline: none
    }

    .news-header .news-header-search-input:focus, .news-header .news-header-search-input:not(:placeholder-shown) {
        width: calc(100% - .6em);
        padding: .3em .6em;
        outline: none
    }
}

@media screen and (min-width: 640.1px) {
    .news-header {
        padding: 30px var(--spacing-outer) 0 var(--spacing-outer);
        position: relative;
        background-color: var(--color-black);
        color: var(--color-white);
        perspective: 100vw;
        perspective-origin: 50% 30%;
        background: radial-gradient(farthest-corner at 50% 100%, #00504b, #32001f00 60%)
    }

    .news-header .news-header--has-bg-image {
        background: none
    }

    .news-header .bgimg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 70vh;
        z-index: -1
    }

    .news-header .bgimg img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        display: block;
        margin: 0;
        opacity: .5;
        mix-blend-mode: overlay;
        image-rendering: pixelated
    }

    .news-header .bgimg:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(0deg, var(--color-black) 0%, rgba(0, 0, 0, 0) 100%);
        z-index: 0;
        pointer-events: none
    }

    .news-header .news-header-content {
        display: flex;
        justify-content: space-between;
        border-bottom: 2px solid var(--color-white)
    }

    .news-header .category {
        font-size: 1.44vw;
        margin-bottom: 1em
    }

    .news-header .news-header-title {
        font-weight: 400;
        max-width: 50vw;
        font-size: 3em;
        -webkit-hyphens: none;
        hyphens: none;
        white-space: nowrap;
        margin-top: 0;
        margin-bottom: .75em
    }

    .news-header .news-header-subhead {
        font-family: var(--font-headline);
        font-size: 2rem;
        line-height: 1.2;
        letter-spacing: -.02em;
        max-width: 50vw;
        color: var(--color-accent);
        margin-bottom: 1em
    }

    .news-header .news-header-subhead:last-child {
        margin-bottom: 0
    }

    .news-header .news-header-newsfilter {
        flex: 0 0 17em
    }

    .news-header .news-header-search {
        flex: 1 1 40%;
        height: 3em;
        display: flex;
        gap: 1em;
        padding: .3em 2em 0
    }

    .news-header .news-header-search label {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 1em
    }

    .news-header .news-header-search label .icon {
        height: 2rem
    }

    .news-header .news-header-search-input {
        width: 0;
        height: 100%;
        padding: 0;
        border: none;
        background-color: transparent;
        color: var(--color-white);
        font-size: 2rem;
        transition: all .2s ease-out;
        font-family: var(--font-headline)
    }

    .news-header .news-header-search-input::-moz-placeholder {
        color: var(--color-white);
        font-family: var(--font-headline);
        font-size: 2rem
    }

    .news-header .news-header-search-input::placeholder {
        color: var(--color-white);
        font-family: var(--font-headline);
        font-size: 2rem
    }

    .news-header .news-header-search-input:not(:-moz-placeholder-shown) {
        width: calc(100% - 2em);
        outline: none
    }

    .news-header .news-header-search-input:focus, .news-header .news-header-search-input:not(:placeholder-shown) {
        width: calc(100% - 2em);
        outline: none
    }
}

@media screen and (max-width: 640px) {
    .news-filter-nav {
        display: flex;
        justify-content: space-between;
    }

    .news-filter-nav-link {
        font-size: .85rem;
        font-weight: 400;
        display: inline-block;
        border: 1px solid var(--color-accent);
        padding: .5em;
        text-decoration: none;
        margin-bottom: .25em;
        color: var(--color-accent);
    }

    .news-filter-nav-link:hover {
        background-color: var(--color-accent-dark);
        color: var(--color-accent);
    }

    .news-filter-nav-link.active {
        background-color: var(--color-black);
        color: var(--color-white);
        border-color: var(--color-white);
        font-weight: 700;
    }

    .news-filter-nav-link.active:hover {
        color: var(--color-accent);
    }

    .news-filter-title {
        font-size: 1rem;
        font-weight: 400;
        margin-top: 0;
        margin-bottom: 0.5em;
        padding-bottom: 0.5em;
        color: var(--color-white);
        border-bottom: 1px solid var(--color-accent-dark);
    }
}

@media screen and (min-width: 640.1px) {
    .news-filter-nav {
        display: flex;
        justify-content: space-between;
    }

    .news-filter-nav-link {
        font-size: .7rem;
        font-weight: 400;
        display: inline-block;
        border: 1px solid var(--color-accent);
        padding: .5em;
        text-decoration: none;
        margin-bottom: .25em;
        color: var(--color-accent);
    }

    .news-filter-nav-link:hover {
        background-color: var(--color-accent-dark);
        color: var(--color-accent);
    }

    .news-filter-nav-link.active {
        background-color: var(--color-black);
        color: var(--color-white);
        border-color: var(--color-white);
        font-weight: 700;
    }

    .news-filter-nav-link.active:hover {
        color: var(--color-accent);
    }


    .news-filter-title {
        font-size: 1rem;
        font-weight: 400;
        margin-top: 0;
        margin-bottom: 0.5em;
        padding-bottom: 0.25em;
        color: var(--color-white);
        /* border-bottom: 1px solid var(--color-accent-dark); */
    }
}

.toast {
    padding: .5em 1em;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 600px;
    margin: 4em auto 1em;
    position: absolute;
    z-index: 100;
    right: 0;

    background: linear-gradient(-135deg, var(--color-accent-dark) 0%, var(--color-black) 100%);
    color: var(--color-accent-lighter);
    box-shadow: 0 0 36px 6px rgba(161, 193, 255, 0.25);
}

.toast button {
    font-size: var(--font-size-l);
    color: white;
    background-color: transparent;
    border: none;
    cursor: pointer;
    padding-bottom: .25em;
}

.toast.toast-hidden {
    display: none;
}

.toast.toast-closed {
    animation: allert-slide-up .3s ease-out;
}

@keyframes allert-slide-up {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(120%);
        opacity: 0;
    }
}

.news-card {
    --spacing-outer: 0;
}

@media screen and (max-width: 640px) {
    .news-card .card-body .button {
        display: block;
        text-align: center;
    }
}

.news-card a {
    text-decoration: none;
}

.news-card .card-body {
    padding: 0;
}

.news-card .card-body-meta {
    display: flex;
    padding: 1rem 0 0 0;
    /* border-bottom: 1px solid var(--color-white); */
    justify-content: space-between;
    font-size: .8rem;
    color: var(--color-accent);
}

.news-card .card-body-meta a {
    color: var(--color-accent);
}


.news-card .news-badge a {
    color: var(--color-accent);
    text-transform: uppercase;
}

.news-card .card-title {
    font-size: 1.33em;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.news-card .card-title a {
    color: var(--color-white);
}

.news-card .card-text {
    font-size: .9em;
    line-height: 1.3;
    color: var(--color-white);
}

.news-card .thumbnail {
    flex: 0 0 50%;
    position: relative;

}

.news-card .thumbnail:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: conic-gradient(from var(--angle) at 50% 50%, var(--color-accent-dark) 100deg, var(--color-accent) 320deg, var(--color-accent-dark) 360deg);
    z-index: 0;
    transition: all 0.3s ease-in-out;
}

.news-card .thumbnail img {
    position: relative;
    z-index: 1;
    image-rendering: pixelated;
    display: block;
    margin: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media screen and (min-width: 640.1px) {
    .news-card .row {
        flex-direction: column;
    }

    .news-card:hover .thumbnail:before {
        filter: blur(20px);
        animation: spin 2s linear infinite;
    }

    .news-card:hover .card-title a {
        color: var(--color-accent);
    }

    .news-card:hover .card-text {
        color: var(--color-accent);
    }
}
.pagination-container {
    display: flex;
    justify-content: center;
}

@media screen and (max-width: 640px) {
    .article {
        margin: auto;
        position: relative;
        background-color: var(--color-black);
        color: var(--color-white);
    }

    .article .row {
        display: flex;
        flex-direction: column-reverse;
        padding: var(--spacing-outer);
        gap: var(--spacing-outer);
    }
}

@media screen and (min-width: 640.1px) {
    .article {
        margin: auto;
        position: relative;
        background-color: var(--color-black);
        color: var(--color-white);
        width: 100%;
        overflow-x: hidden;
    }

    .article .row {
        display: flex;
        padding: var(--spacing-outer);
        gap: var(--spacing-outer);
    }

    .article .news-date a:hover,
    .article .news-badge a:hover {
        text-decoration: underline;
    }
}
@media screen and (max-width: 640px) {
    .phaser_logo {
        width: calc(7.6 * var(--font-size-base));
        height: calc(1.6 * var(--font-size-base));
    }

    .phaser_logo--light path {
        stroke: var(--color-black, #000);
    }

    .phaser_logo--light rect {
        fill: var(--color-black, #000);
    }
}

@media screen and (min-width: 640.1px) {
    .phaser_logo {
        width: 10.13vw;
        height: 2.1vw;
    }

    .phaser_logo--light path {
        stroke: var(--color-black, #000);
    }

    .phaser_logo--light rect {
        fill: var(--color-black, #000);
    }
}
@media screen and (max-width: 640px) {
    .news-body {
        display: flex;
        flex-direction: column;
        gap: 1.5em;
    }
}

@media screen and (min-width: 640.1px) {
    .news-body {
        display: grid;
        /* create a grid with 3 columns and inifinite rows */
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: minmax(100px, auto);
        gap: 1.5em;

    }

    .news-body>* {
        grid-column: span 1;
        grid-row: span 1;
    }

    /* & > :global(*:nth-child(even)) {
    grid-column: 1 / span 1;
    grid-row: span 1;
  }
  & > :global(*:nth-child(odd)) {
    grid-column: 2 / span 1;
    grid-row: span 1;
  } */
    .news-body>.card--featured:first-child {
        /* span 2 columns and one row */
        grid-column: span 3;
        grid-row: span 1;
    }
}


#comments-box input, #comments-box textarea, #comments-box select {
    padding:5px !important;
}