.intro-section-asx {
        position: relative;
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }

    .intro-section-asx figure {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
    }

    .intro-section-asx::after {
        content: '';
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 30%;
        background: linear-gradient(to top, black, transparent);
    }

    .intro-section-asx h2 {
        display: inline-block;
        padding: 150px calc(2% + 30px);
        font-size: 50px;
        line-height: 50px;
        font-weight: 700;
        color: #ffffff;
    }

    .intro-section-asx figure img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .asx-hightlights-container {
        display: grid;
        margin: auto 0 0 0;
        width: 100%;
        padding: 0 2% 150px 2%;
        gap: 0px;
        box-sizing: border-box;
        grid-template-columns: repeat(3, 1fr);
        bottom: 0;
        z-index: 1;
    }

    @media (max-width: 1200px) {
        .asx-hightlights-container {
            grid-template-columns: repeat(2, 1fr);
            /* 2 columns below 1200px */
        }
    }

    @media (max-width: 768px) {
        .asx-hightlights-container {
            grid-template-columns: 1fr;
            /* 1 column below 768px */
        }
    }

    .asx-hightlight {
        position: relative;
        width: 100%;
        height: 400px;
        /* Adjust as needed */
        overflow: hidden;
    }

    .asx-hightlight a.highlight-link {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        text-indent: 200%;
        white-space: nowrap;
        font-size: 0;
        opacity: 0;
        z-index: 2;
    }

    .asx-hightlight video,
    .asx-hightlight picture {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        background-color: #000000;
    }

    .asx-hightlight img {
        position: relative;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .asx-bg-top {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }

    .asx-bg-top::after {
        content: '';
        position: absolute;
        top: 0;
        width: 100%;
        height: 50%;
        background: linear-gradient(to bottom, black, transparent);
    }

    .asx-hightlight video {
        opacity: 0;
        transition: opacity 0.35s;
    }

    .asx-hightlight picture {
        transition: opacity 0.35s;
    }

    .asx-hightlight:hover video {
        opacity: 1;
    }

    .asx-hightlight:hover picture {
        opacity: 0;
    }

    .asx-hightlight .copy {
        position: relative;
        flex-direction: column;
        display: flex;
        padding: 30px;
        z-index: 1;
        color: #fff;
        text-align: left;
        height: 100%;
    }

    .asx-hightlight .copy h3 {
        font-size: 30px;
        line-height: normal;
        font-weight: 700;
        color: #ffffff;
        text-transform: uppercase;
    }

    /* O ALVO TEM DE TER 24 px DE ALTURA (WCAG 2.2 AA, «Target Size (Minimum)»).
       Com `line-height: 12px` e nada à volta, este link media 116 por 12: cabia
       na largura mas era metade da altura mínima, e num telemóvel acerta-se
       nele por sorte. A excepção da norma para ligações em linha não vale aqui,
       porque este link está sozinho no seu bloco e não no meio de um parágrafo.
       Cresce pela altura de linha, e não por `padding`, para o sublinhado do
       `:hover` continuar colado às palavras. */
    .asx-hightlight .copy a.text-link {
        position: relative;
        display: flex;
        align-items: center;
        margin: auto 0 0 0;
        min-height: 24px;
        width: fit-content;
        font-size: 12px;
        line-height: 24px;
        font-weight: 600;
        color: #ffffff;
        text-decoration: none;
        z-index: 2;
    }

    .asx-hightlight .copy a.text-link .ph-icon {
        margin: 0 0 0 7px;
        font-size: 12px;
        transition: all 0.2s ease;
    }

    .asx-hightlight .copy a.text-link:hover .ph-icon {
        margin: 0 0 0 10px;
        font-size: 12px;
    }

    .asx-hightlight .copy a.text-link:hover::after {
        content: '';
        position: absolute;
        /* Era `-5px` quando a caixa tinha a altura do texto. Agora a caixa tem
           24 px e o texto está centrado nela: o sublinhado sobe para a base das
           letras, não para a base da caixa. */
        bottom: 3px;
        width: 100%;
        height: 2px;
        background-color: #ffffff;
    }