* {
    box-sizing: border-box;
}

a {
    text-decoration: none;
}


.row {
    max-width: 900px;
    margin: 50px auto 0;
}

/* ---- Card ---- */
.card {
    float: left;
    padding: 0.5rem 1.7rem;
    width: 22.5rem;
}

/* clearfix for .card .menu-content */
.card .menu-content::before,
.card .menu-content::after {
    content: "";
    display: table;
}

.card .menu-content::after {
    clear: both;
}

.card .menu-content {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.card .menu-content li {
    display: inline-block;
}

.card .menu-content a {
    color: white;
}

.card .menu-content span {
    position: absolute;
    left: 50%;
    top: 0;
    font-size: 10px;
    font-weight: 700;
    transform: translate(-50%, 0);
}

.card .wrapper {
    background-color: white;
    min-height: 400px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.2);
}

.card .wrapper:hover .data {
    transform: translateY(0);
}

.card .data {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.295);
    backdrop-filter: blur(10px);
    transform: translateY(calc(70px + 1em));
    transition: transform 0.3s;
}

.card .data .content {
    padding: 1em;
    position: relative;
    z-index: 1;
}

.card .author {
    font-size: 12px;
}

.card .title {
    margin-top: 10px;
    color: white;
}

.card .text {
    padding-top: 5px;
    height: 70px;
    margin: 0;
}

.truncate_multi {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card input[type="checkbox"] {
    display: none;
}

.card input[type="checkbox"]:checked+.menu-content {
    transform: translateY(-60px);
}

/* ---- Example-2 ---- */
.example-2 .wrapper {
    background: var(--bg-image) center / cover no-repeat;
    border-radius: 10px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.example-2 .wrapper:hover .menu-content span {
    transform: translate(-50%, -10px);
    opacity: 1;
}

/* clearfix for .example-2 .header */
.example-2 .header::before,
.example-2 .header::after {
    content: "";
    display: table;
}

.example-2 .header::after {
    clear: both;
}

.example-2 .header {
    color: white;
    padding: 1em;
}

.example-2 .header .date {
    float: left;
    font-size: 12px;
}

.example-2 .menu-content {
    float: right;
}

.example-2 .menu-content li {
    margin: 0 5px;
    position: relative;
}

.example-2 .menu-content span {
    transition: all 0.3s;
    opacity: 0;
}

.example-2 .data {
    color: white;
    transform: translateY(calc(70px + 4em));
}

.example-2 .title {
    color: white;
    font-weight: 300;
}

.example-2 .title>a {
    color: white;
}

.example-2 .button {
    display: block;
    width: 100px;
    margin: 2em auto 1em;
    text-align: center;
    font-size: 12px;
    color: white;
    line-height: 1;
    position: relative;
    font-weight: 700;
}

.example-2 .button::after {
    content: "\2192";
    opacity: 0;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(0, -50%);
    transition: all 0.3s;
}

.example-2 .button:hover::after {
    transform: translate(5px, -50%);
    opacity: 1;
}

/* ---- Media Queries ---- */
/* Small laptop */
@media only screen and (min-width: 1024px) and (max-width: 1024px) and (min-height: 874px) and (max-height: 874px) {
    .card {
        width: 21rem;
    }
}

/* iPad Pro portrait & landscape */
@media only screen and (min-device-width: 834px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait),
only screen and (min-device-width: 834px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
    .card {
        width: 22rem;
    }
}

/* Tablet */
@media only screen and (max-width: 768px) {}

/* Mobile */
@media only screen and (max-width: 600px) {}

/* Mini+ mobile */
@media only screen and (max-width: 412px) {}

@media only screen and (max-width: 393px) {}

/* 360px */
@media only screen and (max-width: 360px) {
    .card {
        width: 20rem;
    }

    .title {
        font-size: 18pt;
    }

    .text {
        padding-top: 4px;
        font-size: 10pt;
    }
}

/* 320px */
@media only screen and (max-width: 320px) {
    .card {
        width: 20rem;
    }

    .title {
        font-size: 18pt;
    }

    .text {
        padding-top: 4px;
        font-size: 10pt;
    }
}