.tile {
    --bgsize: 7px;
    --bgoffset: 7px;

    width: 25vw;
    min-width: 275px;
    max-width: 300px;

    margin: 0px 10px;
    padding: 20px 30px;

    border: 1px solid;
    border-color: var(--mantine-color-contrast-filled);
    border-radius: var(--paper-radius);
    transform: translateY(0px);
    overflow: visible;

    /*Move up on hover*/
    &:hover {
        transform: scale(105%);
    }

    /*Background 45 degree lines */
    &::before,
    &::after {
        border-radius: var(--paper-radius);
        background-image: linear-gradient(
            45deg,
            rgba(255, 255, 255, 0) 33.33%,
            var(--mantine-color-contrast-filled) 33.33%,
            var(--mantine-color-contrast-filled) 50%,
            rgba(255, 255, 255, 0) 50%,
            rgba(255, 255, 255, 0) 83.33%,
            var(--mantine-color-contrast-filled) 83.33%,
            var(--mantine-color-contrast-filled) 100%
        );
        content: "";
        display: block;
        position: absolute;
        z-index: -2;
        top: var(--bgoffset);
        left: var(--bgoffset);
        width: 100%;
        height: 100%;
        background-size: var(--bgsize) var(--bgsize);
    }
    &::before {
        top: 0px;
        left: 0px;
        background: var(--mantine-color-body);
        z-index: -1;
    }
}

/*make it so the button is on bottom of card*/
.card_text {
    flex-grow: 1;
}