.path-frontpage .featured-top {

    .block-content-basic, 
    .block-views {

        position: relative;
        width: 100%;
        padding: 0;
        margin: 0 0 var(--margin-m) 0;


        .field--name-field-block-cover-image,
        .views-field-field-term-cover-image {
            width: 100%;
            height: 100%;
            aspect-ratio: 16 / 9;
            overflow: hidden;
            object-fit: cover;
                object-position: center;

            img, picture, figure {
                width: 100%;
                height: 100%;
                aspect-ratio: 16 / 9;
                object-fit: cover;
                object-position: center;
            }

            &:before {
                content: '';
                display: block;
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: linear-gradient(0deg, var(--black-transparent-1), var(--black-transparent-3));
                z-index: 1;
            }
        }

        .field--name-body, 
        .views-field-fieldset:has(.fieldset-01) {
            position: absolute;
            top: 70%;
            left: 50%;
            transform: translate(-50%, -30%);
            width: 100%;
            max-width: 800px;
            padding: 0 20px;
            z-index: 2;

            h2, 
            .term-card-title {
                color: var(--white1);
                font-family: var(--ff-serif1);
                line-height: 1;
                font-size: var(--fc-h2);
                font-weight: var(--fw-bold);
                margin-bottom: var(--margin-s);
                text-align: center;
            }

            p,
            .term-card-description {
                color: var(--grey1);
                font-family: var(--ff-sans);
                line-height: 1.25;
                font-size: var(--fc-p);
                font-weight: var(--fw-normal);
                text-align: center;
            }


            ul:has(li a.button),
            div:has(a.term-card-cta) {
                list-style: none;
                padding: 0;
                margin: var(--margin-s)  auto;
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: center;
                gap: var(--margin-s);

                li {
                    list-style: none;
                    color: var(--grey1);
                    font-family: var(--ff-sans);
                }
            }

            a.button, 
            a.term-card-cta {
                display: inline-block;
                padding: var(--margin-s) var(--margin-m);
                background: var(--blue2);
                color: var(--white1);
                font-family: var(--ff-sans);
                font-size: var(--fs-p2);
                font-weight: var(--fw-semibold);
                text-decoration: none;
                border-radius: var(--br-l);
                border: 1px solid var(--blue2);
            }

            a.button.secondary,
            a.term-card-cta.secondary {
                background: var(--blue1);
                color: var(--white1);
                border: 1px solid var(--blue1);    
                border-radius: var(--br-l);


        }
    }

}
}


@media all and (max-width: 780px) {
    .path-frontpage .featured-top {

        .block-content-basic, 
        .block-views {

            position: relative;
            width: 100%;
            padding: 0;
            margin: 0 0 var(--margin-m) 0;


            .field--name-field-block-cover-image,
            .views-field-field-term-cover-image {
                width: 100%;
                height: 100%;
                aspect-ratio: 5 / 7;
                overflow: hidden;
                object-fit: cover;
                    object-position: center;

                img, picture, figure {
                    width: 100%;
                    height: 100%;
                    aspect-ratio: 5 / 7;
                    object-fit: cover;
                    object-position: center;
                }

                &:before {
                    content: '';
                    display: block;
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background: linear-gradient(0deg, var(--black-transparent-1), var(--black-transparent-2));
                    z-index: 1;
                }
            }

            .field--name-body, 
            .views-field-fieldset:has(.fieldset-01) {
                position: absolute;
                top: 60%;
                left: 50%;
                transform: translate(-50%, -30%);
                width: 100%;
                max-width: 800px;
                padding: 0 20px;
                z-index: 2;

                h2, 
                .term-card-title {
                    color: var(--white1);
                    font-family: var(--ff-serif1);
                    line-height: 1;
                    font-size: var(--fc-h2);
                    font-weight: var(--fw-bold);
                    margin-bottom: var(--margin-xs);
                    text-align: center;
                }

                p,
                .term-card-description {
                    color: var(--grey4);
                    font-family: var(--ff-sans);
                    line-height: 1;
                    font-size: var(--fc-small);
                    font-weight: var(--fw-normal);
                    text-align: center;
                    text-wrap: balance;
                }


                ul:has(li a.button),
                div:has(a.term-card-cta) {
                    list-style: none;
                    padding: 0;
                    margin: var(--margin-s)  auto;
                    display: flex;
                    flex-direction: row;
                    flex-wrap: wrap;
                    justify-content: center;
                    gap: var(--margin-s);
                    line-height: 1.25;

                    li {
                        list-style: none;
                        color: var(--grey1);
                        font-family: var(--ff-sans);
                        text-align: center;
                        text-wrap: balance;
                    }
                }

                a.button, 
                a.term-card-cta {
                    display: inline-block;
                    padding: var(--margin-xs) var(--margin-s);
                    background: var(--blue2);
                    color: var(--white1);
                    font-family: var(--ff-sans);
                    font-size: var(--fc-p);
                    font-weight: var(--fw-semibold);
                    text-decoration: none;
                    border-radius: var(--br-l);
                    border: 1px solid var(--blue2);
                }

                a.button.secondary,
                a.term-card-cta.secondary {
                    background: var(--blue1);
                    color: var(--white1);
                    border: 1px solid var(--blue1);    
                    border-radius: var(--br-l);


            }
        }

    }
    }
}