body {
    /* overflow-x: hidden; */
    font-family: 'Rubik', sans-serif;
}

header .navbar {
    background-color: #fff;
    border: 0 none;
    -webkit-box-shadow: 0 0 15px rgb(0 0 0 / 10%);
    box-shadow: 0 0 15px rgb(0 0 0 / 10%);
}

.img-frame {
    border: 1px solid #e7e7e7;
    border-radius: 3px;
    box-shadow: 0 16px 64px 0 rgb(0 0 0 / 12%), 0 0 1px 0 rgb(0 0 0 / 8%);
    line-height: 0;
    overflow: hidden;
    transition: transform .3s ease-out,box-shadow .3s ease-out;
    will-change: transform,box-shadow;
}

.img-frame:hover {
    transform: scale(1.02);
}

.img-frame .image {
    opacity: 1;
    transition: .5s ease;
    backface-visibility: hidden;
}

.img-frame:hover .image {
    /* opacity: 0.1; */
    filter: blur(1px);
  -webkit-filter: blur(1px);
}

.img-frame:hover .middle {
    opacity: 1;
}
.middle {
    opacity: 0;
    /*
    width:100%;
    height: 100%;
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    left: 0;
    top: 0;

    border: 1px solid #d4d4d4; */
    background-color: #fff; /* Fallback color */
    background-color: rgba(255,255,255, 0.9); /* Black w/opacity/see-through */
    font-weight: bold;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0%);
    z-index: 2;
    width: 100%;
    padding: 20px;
    text-align: center;
    transition: .5s ease;
}

.middle .text {
    /* position: absolute;
    top: 30%; */
    /* text-align: center;
    opacity: 1;
    color: #000;
    font-size: 16px; */
    padding: 16px 32px;
}