.su-sleep h3 {
	font-family: "Manrope", sans-serif;
	font-weight: 700;
	font-size: 22px;
	color: #000;
	margin: 0px!important;
	margin-bottom: 20px!important;
}

.su-sleep hr {
	height: 1px;
	width: 100%;
	background-color: #E0E0E0!important;
	color: transparent;
	border: none!important;
	margin-top: 40px!important;
	margin-bottom: 40px!important;
}

.su-sleep-grid{
    display:grid;
    grid-template-columns:repeat(8,1fr);
    gap:15px;
}

.su-sleep-card{

    position:relative;
    aspect-ratio:1/1;
    border-radius:18px;
    overflow:hidden;
    background-size:cover;
    background-position:center;
    cursor:pointer;
    transition:.25s;

}

.su-sleep-card:hover{

    transform:scale(1.03);

}

.su-sleep-overlay{

    position:absolute;
    inset:0;
    background:rgba(0,0,0,.45);

    display:flex;
    align-items:center;
    justify-content:center;

    transition:.25s;

}

.su-sleep-card:hover .su-sleep-overlay{

    background:rgba(0,0,0,.65);

}

.su-sleep-date{

    color:#fff;
    font-size:16px;
    font-weight:700;
    text-shadow:0 2px 10px rgba(0,0,0,.5);

}

.su-sleep-delete{

    position:absolute;
    top:12px;
    right:12px;

	padding: 0px;

    width:20px;
    height:20px;

    border:none;
    border-radius:50%;

    background:#ff3b30;
    color:#fff;

    cursor:pointer;

    font-size:15px;
    font-weight:bold;

    z-index:5;

    transition:.2s;

	display: flex;
	align-items: flex-end;
	justify-content: center;

}

.su-sleep-delete:hover{

    transform:scale(1.15);
    background:#d70015;

}

.su-sleep-lightbox{

    position:fixed;
    inset:0;

    background:rgba(0,0,0,.9);

    display:none;

    align-items:center;
    justify-content:center;

    z-index:99999;

    padding:40px;

}

.su-sleep-lightbox.active{

    display:flex;

}

.su-sleep-lightbox img{

    max-width:90vw;
    max-height:90vh;

    border-radius:14px;

    object-fit:contain;

}

.su-sleep-close{

    position:absolute;

    top:25px;
    right:30px;

    font-size:42px;
    color:#fff;

    cursor:pointer;

    line-height:1;

    user-select:none;

}

/* ==========================================
   Mobil
========================================== */

@media (max-width:768px){

    .su-sleep-grid{

        grid-template-columns:repeat(3, 1fr);
        gap:10px;

    }

}