pedwfrontend/styles/sass/patterns/_card.scss

.flex-container {
    display: flex;
    flex-wrap: wrap;
}

.card {
    flex-grow: 0;
    flex-basis: 100%;
    margin-bottom: 2em;
}

@media screen and (min-width: 600px) and (max-width: 900px) {
    .card {
        flex-basis: 45.99%;
        // Every card in the first row needs horizontal margin
        &:nth-child(2n-1) {
            margin-right: 3%;
        }
        // Every card in the second row needs horizontal margin
        &:nth-child(2n-2) {
            margin-left: 3%;
        }

        &.card-3 {
            flex-basis: 46%;
            min-height: 300px;

            // &:nth-child(3n-1) {
            //   margin-left: 3%;
            //   margin-right: 3%;
            // }
        }
    }
}

@media screen and (min-width: 900px) {
    .card {
        flex-basis: 48.2%;

        &:nth-child(2n-2) {
            margin-left: 3%;
        }
        &.card-3 {
            flex-basis: 31.1%;
            min-height: 300px;

            &:nth-child(2n-2) {
                margin-left: 0%;
            }

            &:nth-child(3n-1) {
                margin-left: 3%;
                margin-right: 3%;
            }
        }
    }
}

html[data-useragent*="MSIE 10.0"] .flex-container {
    .card {
        flex-basis: 46%;
        margin: 3%;

        &.card-3 {
            flex-basis: 31%;
        }
    }
}

.card {
    border: none;
    font-size: 16px;
    background-color: $lightgrey_offwhite;

    &.inactive {
        color: $govuk-secondary-text-colour;
    }

    .card-heading {
        margin-top: 0;
    }

    .card-body {
        //border-bottom: 1px solid $govuk-border-colour; //$panel-colour;
        padding: 40px 20px;

        *:last-child {
            margin-bottom: 0;
        }
        a,
        a:active,
        a:visited {
            color: $blue;
            font-weight: bold;
            text-decoration: none;
            &:hover {
                color: $lightblue;
            }
            &.govuk-button {
                color: $white;
                // &:focus {
                //     color: $black;
                //     background-image: url(https://gov.wales/themes/custom/govwales/storage/smartsurvey/arrow-right--black.svg);
                // }
            }
        }

        a:focus {
            border: $yellow solid 3px;
            outline: 3px solid transparent;
        }

        &.active {
            background-color: govuk-colour("light-grey", $legacy: "grey-4");
            transition: 0.1s ease-in-out;

            .card-heading a {
                color: $govuk-link-colour;
                margin-top: 0;
                &:focus {
                    color: govuk-colour("black", $legacy: "black");
                    outline: 3px solid transparent;
                    box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
                }
            }
        }

        .detail-large {
            color: $govuk-secondary-text-colour;
            font-size: 32px;
            font-weight: 600;
            margin-bottom: 8px;
        }

        .detail {
            font-weight: 600;
            margin-bottom: 8px;
        }
    }

    .card-action {
        border-top: 0;
        padding: 12px;

        a {
            display: inline;
            border-bottom: 1px solid #c7dceb;
            color: $govuk-link-colour;
            line-height: 1.5em;

            &:link,
            &:visited {
                color: $govuk-link-colour;
            }

            &:hover {
                text-decoration: none;
                border-bottom: 1px solid $govuk-link-colour;
                color: #2e8aca;
            }

            &:focus {
                color: govuk-colour("black", $legacy: "black");
                outline: 3px solid transparent;
                box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
            }
        }

        ul {
            margin: 0;

            li {
                margin: 0 0 1em;

                &:last-child {
                    margin-bottom: 0;
                }
            }
        }
    }
    &.clear {
        background-color: govuk-colour("white", $legacy: "white");
        border: none;
    }
}

.js {
    .card-body.active {
        &:hover {
            //background-color: $govuk-link-colour;
            color: $govuk-link-colour;
            cursor: pointer;
            transition: 0.1s ease-in-out;
            transition-delay: 0.25s;

            .card-heading,
            p {
                color: $govuk-link-colour;
                transition: 0.1s ease-in-out;
                transition-delay: 0.25s;
            }

            .card-heading a {
                color: $govuk-link-colour;
                transition-delay: 0.25s;
            }

            .detail-large {
                color: $govuk-link-colour;
                transition-delay: 0.25s;
            }
        }

        a {
            text-decoration: none;
        }
    }
}

#inspectorate-card .card-body {
    padding-top: 20%;
}

.card-3 .card-body,
.appealModule.card-body {
    display: inline-flex;
    flex-direction: column;
    min-height: 30vh;
    width: -webkit-fill-available;

    .cardVieAll {
        margin-top: auto;
    }
}

// .card-body {
//     width: 93%;
// }

div.cardModuleItem:last-of-type {
    margin-bottom: 20px !important;
}

.cardModuleItem {
    display: flex;
    padding: 10px 10px 10px 0;
    border-bottom: 1px solid lightgrey;

    .cardModuleDetails {
        width: 95%;
    }

    .cardModuleReference {
        display: flex;
        b {
            min-width: 122px;
        }
        a {
            margin-left: 10px;
        }
    }

    .cardModuleRemoveCase {
        border: 1px solid $red;
        padding: 5px;
        height: 20px;
        padding-top: 0px;
        padding-bottom: 0px;
        border-radius: 5px;
        width: auto;
        color: white !important;
        font-weight: bold;
        background-color: $red;
        font-size: 15px;
        cursor: pointer;

        &:active {
            top: 2px;
        }

        &:hover {
            background-color: $lightred;
            color: $white !important;
            text-decoration: none;
        }

        &:focus {
            border-color: #ffdd00;
            outline: 3px solid transparent;
            -webkit-box-shadow: inset 0 0 0 1px #ffdd00;
            box-shadow: inset 0 0 0 1px #ffdd00;
        }

        &:focus:not(:active):not(:hover) {
            border-color: #ffdd00;
            color: #0b0c0c;
            // background-color: #ffdd00;
            // -webkit-box-shadow: 0 2px 0 #0b0c0c;
            // box-shadow: 0 2px 0 #0b0c0c;
        }
    }
}