/* Single feature link */

.featured-link {
    position: relative;
    flex-flow: column;
}

.featured-link-content-left-image {
    margin-top: -1rem;
}

.featured-link-content-right {
    margin-top: -1rem;
}



@media screen and (min-width: 960px) {

    .featured-link-content {
        margin-top: 0;
        display: flex;
        width: 41%;
        position: absolute;
        top: 12%;
        bottom: 12%;
    }

    .featured-link-content-right {
        right: 0;
    }

    .featured-link-content-left {
        left: 0;
    }

    .featured-link-content-left-image {
        margin-top: 0rem;
        max-width: 70%;
    }

    /*
     MudBlazor's grid system divides the container into 12 columns (12 units).
     The `.mud-grid-item-md-8` class means this item spans 8 out of 12 columns (8/12 of the width).
     By default, MudBlazor uses 100% of the container width: (100% / 12) * 8 = 66.67%.
     For featured link we want to use 90% of the container width instead: (90% / 12) * 8 = 60%.
     This makes the image container slightly smaller for a single featured link.
    */
    .featured-link .mud-grid-item-md-8 {
        max-width: calc(90% / 12 * 8);
        flex-basis: calc(90% / 12 * 8);
    }

}

/* Multiple feature links */


.featured-links-item-image {
    width: 55%;
}

.featured-links-item-content {
    width: 45%
}

.featured-links-item-content a {
    position: absolute;
    width: 55%;
    right: 0;
    padding: 1rem;
    margin-right: 1.25rem;
    top: 12%;
    bottom: 12%;
    display: flex;

}

.featured-links-item.alternate {
    flex-direction: row-reverse;
}

.featured-links-item.alternate .featured-links-item-content a {
    margin-right: 0rem;
    margin-left: 1.25rem;
    left: 0;
}

@media screen and (min-width: 600px) {
    .featured-links-item .featured-links-item-content a,
    .featured-links-item.alternate .featured-links-item-content a {
        padding: 2.5rem 2rem;
    }
}

@media screen and (min-width: 960px) {

    .featured-links-item-image {
        width: 100%;
    }

    .featured-links-item-content {
        height: 100%;
        width: 100%;
        margin-top: -7rem;
    }

    .featured-links-item .featured-links-item-content a,
    .featured-links-item.alternate .featured-links-item-content a {
        width: 100%;
        margin: 1rem;
        position: relative;
        height: 100%;
        padding: 2.5rem 2rem;
    }
}