html,
body {
  min-height: 100%;
  height: 100%;
  width: 90%;
  padding: 0;
  margin: 0 auto;
}

:root {
    --wa-font-family-body: 'Figtree', sans-serif;
    --wa-font-family-heading: 'Figtree', sans-serif;
    --wa-font-weight-body: 400;
    --wa-font-weight-heading: 600;
    --wa-line-height-condensed: 1.2;
    --wa-border-radius-l: 0.5rem;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--wa-font-family-heading);
    font-weight: var(--wa-font-weight-heading);
    line-height: var(--wa-line-height-condensed);
    text-wrap: balance;
}

h1 {
    opacity: 0%;
}

h2 {
    font-size: var(--wa-font-size-xl);
}

.grid-container {
    --auto-grid-min-size: 18rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr));
    grid-gap: 1rem;
}

.card-article {
    position: relative;
    border-color: rgb(161, 106, 3);
    border-width: 1px;
    border-end-end-radius: 0rem;
    border-end-start-radius: 0rem;
    padding: 0.1rem;
    opacity: 20%;
    transition: opacity 0.3s ease-in-out;
}

.card-article.main {
    opacity: 100%;
}

@media screen and (max-width: 910px) { 
    .card-article.main {
        order: -1;
    }
}

.header {
    display: flex;
    gap: 1rem;
    position: absolute;
    top: -0.8rem;
    left: auto;
    font-weight: 700;
    background-color: #fff;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    z-index: 3;

    .right {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 1rem;
    }
}