.dsg-image-hover-box {
    width: 100%;
    max-width: 420px;
    border-radius: 18px;
    overflow: hidden;
    position: relative;
    background: #eee;
    box-shadow: 0 4px 32px rgba(0,33,71,.09);
    transition: box-shadow .15s;
    margin: 0 auto;
    display: block;
}
.dsg-hover-img {
    width: 100%;
    border-radius: 18px;
    position: relative;
}
.dsg-hover-img img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 18px;
    transition: filter 0.25s, transform .20s cubic-bezier(.23,1.08,.68,1.1);
    will-change: filter, transform;
    margin-bottom:10px;
}

.dsg-hover-title {
    position: absolute; left: 0; right: 0; top: 38px; padding: 0 28px;
    text-align: left; color: #fff; font-size: 2.1em; font-weight: 800; letter-spacing: .5px;
    line-height: 1.12em; z-index: 2; text-shadow: 0 2px 8px rgba(0,0,0,.13); pointer-events: none;
    text-transform: uppercase;
}

.dsg-hover-btn {
    display: block;
    position: absolute;
    left: 50%;
    bottom: 24px;
    transform: translate(-50%, 80%);
    opacity: 0;
    background: #0f823f;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 1.24em;
    padding: 13px 26px 9px 26px;
    border-radius: 23px;
    box-shadow: 0 2px 14px rgba(0,33,71,.12);
    text-align: center;
    transition: opacity .22s, transform .22s ease-in;
    z-index: 3;
    pointer-events: none;
    border: none;
    text-decoration: none !important;
    min-width: 170px;
    white-space: nowrap;
}

/* Hover Efekti */
.dsg-image-hover-box:hover .dsg-hover-img img {
    filter: brightness(.92);
}
.dsg-image-hover-box:hover .dsg-hover-btn {
    opacity: 1;
    transform: translate(-50%, 0%);
    pointer-events: all;
}

.dsg-hover-btn:hover {
    background: #000000;
    color: #ffffff;
	transition: all .5s ease-in-out;
}

@media (max-width: 600px) {
    .dsg-image-hover-box { max-width: 98vw; }
    .dsg-hover-title { font-size: 1.2em; padding: 0 10px; top: 22px;}
    .dsg-hover-btn { min-width: 98px; font-size: 1em; padding: 8px 13px 6px 13px;}
}