html {
    font-size: 16px;

    @media (min-width: 1904px) {
        font-size: 18px;
    }

    @media (max-width: 768px) {
        font-size: 14px;
    }
}

#article-cover {
    min-height: 600px;
    height: 95vh;
    background-color: rgb(55, 55, 55);
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    position: relative;

    @media (max-width: 768px) {
        height: 110vh;
    }

    @media (min-width: 1900px) {
        height: 80vh;
    }

    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: 
            linear-gradient(to top,
            rgba(0, 0, 0, 0) 75%,
            rgba(0, 0, 0, 0.65) 100%),
            linear-gradient(to bottom, 
            rgba(0, 0, 0, 0.1) 30%, 
            rgba(0, 0, 0, 0.85) 100%),
            linear-gradient(to right,
            rgba(0, 0, 0, 0.36) 0%,
            rgba(0, 0, 0, 0) 30%);
        z-index: 1;
    }

    .heading-container {
        /* border: 1px solid pink; */
        width: 100%;
        padding: 0 12px;
        color: white;
        z-index: 2;

        @media (min-width:1264px) {
            max-width: 1185px;
        }

        .heading-container__contents {
            max-width: 950px;
            padding-bottom: 40px;
        }

        .material-symbols-outlined {
            font-size: 11px;
            align-self: center;

            font-variation-settings:
                'FILL' 1,
                'wght' 300,
                'GRAD' 0,
                'opsz' 20
        }

        h1 {
            font-family: 'Inter', sans-serif;
            /* font-size: 4rem; */
            /* font-size: clamp(1.75rem, 11vw, 4rem); */
            font-size: clamp(3rem, 1.75rem + 4vw, 4rem);
            font-weight: bold;
            line-height: 1.2;
            word-wrap: break-word;
            overflow-wrap: break-word;
            hyphens: auto;
            max-width: 100%;
        }

        span.subheading {
            display: block;
            font-weight: bold;
            font-size: clamp(2rem, 1.6875rem + 1vw, 2.25rem);
        }

        .label-container {
            padding-bottom: 25px;
        }

        .content-label {
            font-family: 'DM Mono', monospace;
            font-size: 12px;
            letter-spacing: 4px;
            font-weight: 500;
            text-transform: uppercase;
        }

        .content-label-icon {
            border: 1px solid white;
            border-radius: 50px;
            margin-right: 5px;
            display: inline-flex;
            justify-content: center;
            width: 15px;
            height: 15px;
            transform: translateY(1px);
        }

        .credits {
            font-family: 'Public Sans', sans-serif;
            font-size: 12px;
            text-align: right;
            margin-bottom: 20px;
        }
    }

    .breadcrumb-container {
        width: 100%;
        padding: 0 12px;
        color: #aeaeae;
        z-index: 10;
        text-transform: uppercase;

        @media (min-width:1264px) {
            max-width: 1185px;
        }

        > * {
            text-shadow: 0px 1px 3px black;
        }
    }

    /* .material-symbols-outlined {

        font-variation-settings:
        'FILL' 1,
        'wght' 300,
        'GRAD' 0,
        'opsz' 20
    } */
}

/* 
    PRIMARY BUTTON (➔) 
*/

#primary-button {
    font-family: 'Inter', sans-serif;
    font-weight: 700 !important;
    font-size: 1.375rem;
    display: flex;
    align-items: center;
    color: black;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-block;

    &:hover {
        filter: brightness(80%);
    }

    .button-text {
        &:hover {
            text-decoration: underline;
        }
    }

    .arrow-internal {
        font-size: 21px !important;
        color: white;
        border-radius: 100px;
        width: 24px;
        height: 24px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-left: 8px;
    }

    .button-icon {
        font-size: 18px !important;
        opacity: 0.6;
        margin-right: 4px;
    }
}