:root {
    /* --sylvia-green: #A3e0CE; */
    --sylvia-green: #8CCDB5;
}

@font-face {
    font-family: Bembo;
    src: url("fonts/Bembo\ Book\ MT\ Pro\ Italic.otf") format("opentype");
}

@font-face {
    font-family: Sackers;
    src: url("fonts/SackersGothicStd-Medium.otf") format("opentype");
}

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

a:active {
    text-decoration: none;
}

body {
    margin: 0;
    min-height: 100vh;
    display: grid;
    grid-auto-flow: column;
    place-content: center;
    background-color: #D1EBDA;
    color: #fff;
}

.card {
    display: grid;
    border-radius: 1rem;
    overflow: hidden;
    cursor: pointer;
    background-color: var(--sylvia-green);
}



/* .card>* {
    grid-area: 1/1;
    transition: .4s;
} */

.card .container {
    display: grid;
    align-items: end;
    color: #fff;
    padding-left: 150px;
    padding-right: 150px;
    padding-top: 150px;
    padding-bottom: 100px;
    min-width: 200px;
    min-height: 100px;
    text-align: center;
}

.card .container .name {
    font-family: sans-serif;
    font-size: 2.5rem;
    font-weight: bold;
    font-family: 'Sackers', sans-serif;
}

.card .container .title {
    font-family: serif;
    font-size: 1.5rem;
    font-weight: normal;
    padding-top: 5px;
    font-family: 'Bembo', serif;
}

.card .container .details {
    font-family: serif;
    font-size: 1.5rem;
    font-weight: normal;
    padding-top: 30px;
    font-family: 'Bembo', serif;
}

.card:hover .action {
    --_i: 0%;
}

@supports not (-webkit-mask-clip: text) {
    .card .action {
        -webkit-mask: none;
        color: #fff;
    }
}