.snippet {
    margin-top   : 2rem;
    margin-bottom: 1rem;

    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    overflow: hidden;

    border-radius: 0.8rem;

    width: 100%;
    height: 300px;

    background-color: white;

    border: 0.3em solid gray;
    box-shadow: inset 0 0 0 1px gray;
}

.snippet-card {
    height: 100%;

    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    width: calc(100% - 300px);
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;

    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    flex-direction: column;
}

.snippet-card>hr {
    margin: 0;

    width: 100%;
}

.snippet-photo {
    width : 300px;
    height: 300px;
}

.snippet-photo>img {
    width : 100%;
    height: 100%;

    object-fit: cover;
}

@media only screen and (max-width: 750px) {
    .snippet-card {
        width: 100%;
    }

    .snippet-photo {
        display: none;
    }
}

.snippet-content {
    margin: 1rem;

    overflow: hidden;

    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    height: 100%;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;

    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    flex-direction: column;
}

.snippet-action-bar {
    margin: 12px;

    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

.snippet-button {
    display: block;
    padding: 12px 16px;

    margin-right: 12px;

    border-radius: 8px;

    text-decoration: none;
}

.snippet-button:last-of-type {
    margin-right: 0;
}

.snippet-button-primary {
    background-color: #06f;

    color: white;
}

.snippet-button-primary:hover {
    background-color: #04e;
}

.snippet-button-primary-disabled {
    background-color: #6bf;

    color: white;

    cursor: default;
}

.snippet-button-secondary {
    background-color: #777;

    color: white;
}

.snippet-button-secondary:hover {
    background-color: #555;
}


.snippet-title {
    display: inline-block;

    margin-bottom: 0.6rem;
    margin-right: 0.6em;

    font-weight: bold;
    font-size  : 1.4rem;

    text-decoration: underline;
}

.snippet-dates {
    margin-bottom: 0.7rem;

    font-style: italic;

    color: dimgray;
}

.snippet-tech {
    margin-bottom: 1rem;
}

.snippet-description {
    position: relative;

    overflow: hidden;

    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    height: 100%;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.snippet-description:after {
    content: "";

    position: absolute;

    bottom: 0;
    left: 0;

    width: 100%;
    height: 1.5em;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 100%);
}

.snippet-description-text {
}