main.user-dashboard {

    .page-header {
        margin-bottom: 1rem;
    }

    .custom-dashboard-header {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        .custom-dashboard-logo {
            max-width: 280px;
        }

        @media screen and (max-width: 576px) {
            flex-direction: column;
        }
    }

    .custom-dashboard-article {
        display: flex;
        flex-direction: column;

        header {
            text-align: center;
        }

        .custom-dashboard-article-inner {
            margin: auto;

            ul {
                list-style: none;
                padding-left: 0;
            }
        }
    }

    .dashboard-content {

        .cards-container {
            max-height: 100vh;

            .cards-wrapper {
                .btn-dashboard {
                    color: #051641;
                    border: 1px solid #051641;

                    &:hover {
                        color: white;
                        background-color:  #051641;
                    }
                }
            }

            .cards-wrapper {
                .card.card--dashboard {
                    background-color: rgba(116, 192, 188, 0.2);
                    color: #051641;
                    display:  flex;
                    border: 2px solid #051641;
                    align-items: center;
                    justify-content: center;

                    @media screen and (max-width: 576px) {
                        min-width: unset;
                    }

                    &.full-width {
                        grid-column: span 3;
                    }

                    .icon__wrapper {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 100%;

                        .icon {
                            fill: #051641;
                        }
                    }

                    h4 {
                        color: #051641;
                    }
                }

                .grid-item, .flex-item {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 1.3em;
                    font-weight: bold;
                    color: white;
                }
            }

            .cards-wrapper.grid-container {
                display: grid;                                                /* 1 */
                grid-auto-rows: 50px;                                         /* 2 */
                grid-gap: 10px;                                               /* 3 */
                grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));   /* 4 */

                @media screen and (max-width: 992px ) {
                    display: flex;
                    flex-direction: column;
                    gap: 10px
                }

                [short] {
                    grid-row: span 1;
                }

                [tall] {
                    grid-row: span 2;
                }

                [taller] {
                    grid-row: span 3;
                }

                [extra-tall] {
                    grid-row: span 4;
                }

                [tallest] {
                    grid-row: span 6;
                }
            }

            .cards-wrapper.flex-container {
                display: flex;
                justify-content: center;
                flex-wrap: wrap;
                gap: 10px;

                @media screen and (max-width: 992px ) {
                    flex-direction: column;
                }

                .flex-item {
                    flex: 0 1 calc(50% - 10px);
                    width: unset;
                    min-height: 100px;
                }
            }
        }
    }
}