html, body {
    overflow-x: clip !important;
    overflow-x: unset !important;
    position: relative;
}

.grecaptcha-badge {
    z-index: -1 !important;
}


#hero {
    font-family: "Roboto", system-ui, -apple-system, sans-serif;
    
    min-height: 70dvh;
    overflow: clip;
    position: relative;
    isolation: isolate;
}
#hero::after {
    content: "";
    position: absolute;
    inset: 0;

    background: linear-gradient(
        to right,
        hsla(225, 21%, 7%, 0.95),
        hsla(225, 21%, 7%, 0.65)
    );

    z-index: -1;
}
#hero picture.back-gr {
    position: absolute;
    inset: 0;
    z-index: -1;
}
#hero picture.back-gr img {
    min-width: 100%;
    min-height: 100%;
}

#hero .hero-inner {
    padding-block: 15rem 7.5rem;

    display: grid;
    place-items: center;
    gap: 5rem;
}
#hero .hero-inner h1 {
    font-size: 7.2rem;
    line-height: 1.25;
    font-style: italic;
    text-transform: uppercase;
    color: var(--font-col-600);
}
#hero .hero-inner p.text {
    max-width: 60ch;

    font-size: 2.4rem;
    font-weight: 500;
    line-height: 1.625;
    text-align: center;
    color: var(--font-col-400);
}

/* Search Group */

#hero .search-group {
    margin-inline: auto;
    width: min(67.5rem, 100%);

    display: grid;
    align-items: center;
    grid-template-columns: 20px 1fr;
    gap: 1.2rem;
}

#hero .search-group svg {
    transition: color 0.25s;
}
#hero .search-group:not(:has(input[type="search"]:placeholder-shown)) svg {
    color: var(--yellowE5);
}

#hero .search-group input[type="search"] {
    -webkit-appearance: none;
    appearance: none;

    padding: 2rem 2.4rem;

    font-size: 1.8rem;
    color: var(--font-col-500);

    backdrop-filter: blur(12px);
    background-color: #ffffff1a;
    outline: unset;

    border: 2px solid var(--font-col-400);
    border-radius: 1.6rem;

    &::placeholder {
        color: var(--font-col-300);
    }
}
#hero input[type="search"]:is(:hover, :focus) {
    transition: border 0.25s;
    border: 2px solid var(--yellow);
}


/* BLOG General */

#blog {
    background-color: #000;
}

/* Filters */

#blog .filters {
    padding-block: 2.4rem;
    background-color: var(--main-col1);
    border-block: 1px solid #1e2939;

    position: sticky;
    top: 7.23rem;
    z-index: 1;
}
#blog .filters nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

#blog .filters nav button {
    padding: 1.2rem 2.4rem;

    font-size: 1.4rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #364153;

    display: flex;
    align-items: center;
    gap: 8px;

    background-color: var(--main-col2);
    transition: background-color 0.25s;

    border-radius: 6px;
    border: unset;

    & span {
        margin-top: 2px;
    }
}

#blog .filters nav button:not([disabled]):is(:hover, :focus-visible) {
    background-color: #252a42;
}

#blog .filters nav button svg,
#blog .filters nav button span {
    --size: 18px;

    font-size: 1.4rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--font-col-400);
}

#blog .filters nav button[disabled] {
    background-color: var(--yellow);
}
#blog .filters nav button[disabled] svg,
#blog .filters nav button[disabled] span {
    color: #000;
}


/* Articles */

#blog h4 {
    margin-top: 3.2rem;

    font-size: 3rem;
    font-style: italic;
    text-transform: uppercase;
    color: #fff;
}

ul#articles {
    padding-block: 8rem 4rem;
    list-style: none;

    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(38rem, 1fr));
    gap: 3.2rem;
}
ul#articles li {
    transition: translate 0.2s;

    display: grid;
    grid-template-rows: auto 1fr;

    background-color: var(--main-col2);
    border: 1px solid #1e2939;
    border-radius: 1rem;

    transition: opacity 0.25s;

    position: relative;
    isolation: isolate;

    overflow: clip;
}

ul#articles li .tag {
    position: absolute;
    top: 1.2rem; left: 1.2rem;

    padding: 0.6rem 1.2rem;

    display: flex;
    align-items: center;
    gap: 8px;

    background-color: #000;
    border-radius: 3rem;

    z-index: 1;
}
ul#articles li .tag svg {
    --size: 16px;
    color: var(--yellow);
}
ul#articles li .tag span {
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--yellow);
}

ul#articles li picture {
    width: 100%;
    aspect-ratio: 286 / 192;

    display: flex;
    align-items: center;
    justify-content: center;

    background-color: gray;

    overflow: hidden;
}
ul#articles li picture img {
    width: 120%;
    object-fit: contain;
    object-position: center;

    transition: scale 0.25s;
}

ul#articles li .info {
    padding: 2.4rem;

    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

ul#articles li .info .article-dates {
    display: flex;
    align-items: center;
    gap: 1.6rem;
}
ul#articles li .info .article-dates > *,
ul#articles li .info .author {
    display: flex;
    align-items: center;
    gap: 5px;
}
ul#articles li .info svg,
ul#articles li .info time,
ul#articles li .info data,
ul#articles li .info small {
    --size: 14px;
    font-size: 1.2rem;
    color: #6a7282;
}

ul#articles li .info h5 {
    flex: 1;
    font-size: 2rem;
    font-style: italic;
    text-transform: uppercase;
    color: var(--font-col-600);
}
ul#articles li .info h6 {
    flex: 1;
    font-size: 1.4rem;
    line-height: 1.625;
    color: var(--font-col-300);
}

ul#articles li .info .article-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
ul#articles li .info .article-footer a {
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--yellow);
    transition: letter-spacing 0.25s;
    &:is(:hover, :focus-visible) {
        letter-spacing: 0.7px;
    }
}

ul#articles li:is(:hover, :focus-within) img {
    scale: 1.05;
}
ul#articles li:is(:hover, :focus-within) h5 {
    color: var(--yellow);
}

ul#articles li.-hidden {
    opacity: 0;

    position: absolute;
    z-index: -1;
}


/* Pages Nav */
ul#pageNavs {
    list-style: none;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;

    padding-bottom: 8rem;
}
ul#pageNavs li > * {
    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 1.6rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--font-col-300);

    border: 2px solid #364153;
    transition: border 0.25s;
    border-radius: 50%;

    cursor: default;
}
ul#pageNavs li svg {
    --size: 16px;
    color: var(--font-col-300);
}
ul#pageNavs li > a {
    cursor: pointer;
}
ul#pageNavs li > a:is(:hover, :focus) {
    color: var(--yellow);
    border: 2px solid var(--yellow);
}
ul#pageNavs li[data-current="true"] > * {
    background-color: var(--yellow);
    border-color: var(--yellowE5);
    color: #000;
}
ul#pageNavs li.nav-page span {
    opacity: 0.4;
}


/* CTA */
#cta {
    padding-block: 8rem;
    background: linear-gradient(
        135deg,
        var(--blue5B),
        var(--blue3D),
        var(--blue2A)
    );
}
#cta .-main-box {
    display: grid;
    place-items: center;
    gap: 3.2rem;
}
#cta h2 {
    font-size: 6rem;
}
#cta p.text {
    max-width: 80rem;

    font-size: 2rem;
    font-weight: 500;
    color: var(--font-col-600);
    line-height: 1.625;
    text-align: center;
}
#cta .buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.2rem;
    & > * {
        border-radius: 5rem;
    }
}


/* SUBSCRIBE */
#subscribe {
    padding-block: 8rem;
}
#subscribe .-main-box {
    display: grid;
    place-items: center;
    gap: 2.4rem;
}
#subscribe p.text {
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--font-col-300);
    line-height: 1.625;
    text-align: center;
}
#subscribe form {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.2rem
}
#subscribe form input[type="email"] {
    flex: 1;
    max-width: 36rem;

    padding: 2.1rem 2.4rem;

    font-size: 1.6rem;
    color: var(--font-col-600);

    background-color: var(--main-col2);

    border: 1px solid #364153;
    border-radius: 6px;
}
#subscribe form input[type="email"]::placeholder {
    color: #364153;
    color: var(--font-col-200);
}