@charset "UTF-8";

/*
    Copied css from here: https://github.com/DFE-Digital/dfe-frontend/blob/main/dist/dfefrontend-2.0.0.min.css
    Only took stuff relating to dfe-card
    The SCSS for the card can be found here:
        https://github.com/DFE-Digital/dfe-frontend/blob/main/packages/components/card/_card.scss
*/
.dfe-grid-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 30px
}

@media (min-width: 40.0625em) {
    .dfe-grid-container {
        display: grid;
        grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
        gap: 30px
    }
}

.dfe-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: #f8f8f8;
    border: 1px solid #dee0e2;
    max-width: 400px
}

@media (max-width: 40.0525em) {
    .dfe-card {
        max-width: 100%
    }
}

.dfe-card > picture, .dfe-card > picture > img {
    max-width: 100%
}

.dfe-card-container {
    padding: 24px;
    display: flex;
    flex-grow: 1;
    flex-direction: column
}

/* Last element push to the bottom */
.dfe-card-container :last-child {
    margin-top: auto
}

/* except when it's just a linkable header and p - don't margin:auto. */
.dfe-card-container h2 + p:last-child,
.dfe-card-container h3 + p:last-child,
.dfe-card-container h2 + ul:last-child,
.dfe-card-container h3 + ul:last-child,
.dfe-card-container h3 + p + ul:last-child {
    margin-top: 0
}

.dfe-card:focus-within, .dfe-card:hover {
    background-color: #1d70b8
}

.dfe-card:hover a,
.dfe-card:focus-within a,
.dfe-card:hover p,
.dfe-card:focus-within p,
.dfe-card:hover li,
.dfe-card:focus-within li,
.dfe-card:hover .govuk-heading-m,
.dfe-card:focus-within .govuk-heading-m
{
    color: #ffffff
}

.dfe-card:focus-within {
    outline: 3px solid #fd0
}

.dfe-card-container .dfe-card-link--header:focus, .dfe-card-container .dfe-card-link--retake:focus {
    color: #0b0c0c
}

.dfe-card-link--retake {
    position: relative;
    z-index: 2
}

.dfe-card-link--header {
    text-decoration: none;
    color: #347ca9
}

.dfe-card-link--header:after {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    right: 0;
    bottom: 0
}