.calendar-grid {
    /* background: red; */
    display: grid;
    margin: 20px auto;
    max-width: 290px;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.calendar-grid .modern-door {
    align-items: center;
    color: white;
    cursor: pointer;
    display: flex;
    font-size: 25px;
    font-weight: 600;
    height: 90px;
    justify-content: center;
    width: 90px;    
    position: relative;
    box-shadow: inset 5px 5px 15px 3px rgb(0 0 0 / 50%);
}
.calendar-grid .modern-door .placeholder {
    background:white;
}
.calendar-grid .modern-door .image,
.calendar-grid .modern-door .placeholder {
    width: 90px;
    height: 90px;
    left: 0;
    top: 0;
    display: block;
    box-sizing: border-box;
    position: absolute;
    z-index: 1;
    opacity: 0;
    transition: opacity 500ms ease-out;
    box-shadow: inset 5px 5px 15px 3px rgb(0 0 0 / 50%);
    background-repeat: no-repeat;
}
.calendar-grid .modern-door.today .cover{
    cursor: pointer;
}
.calendar-grid .modern-door.today:hover .image,
.calendar-grid .modern-door.today:hover .placeholder {
    opacity: 1;
    transition: opacity 500ms ease-out;
}

.calendar-grid .modern-door .cover {
    box-shadow: 0 8px 16px rgba(0,0,0,0.15);
    background: linear-gradient(135deg, #0052A1 0%, #0052A1 50%, rgba(0,46,89,0.5) 100%); /* W3C */
    cursor: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0px:
    left: 0px;
    width: 90px;
    height: 90px;
    transform-origin: left;
    z-index: 3;
    /*Speed of the Door animation*/
    transition: all 0.5s ease-in-out;
}
.calendar-grid .modern-door.available .cover {
    background: linear-gradient(135deg, #0052A1 0%, #002E59 100%); /* W3C */
    cursor: pointer;
    transform: perspective(600px) translateZ(0px) translateX(0px) translateY(0px) rotateY(-35deg);
}
.calendar-grid .modern-door.available .image,
.calendar-grid .modern-door.available .placeholder {
    opacity: 1;
    transition: opacity 500ms ease-out;
}
.calendar-grid .modern-door .cover.doorOpen {
  /*prespectiv creates the door open effect*/
  transform: perspective(1200px) translateZ(0px) translateX(0px) translateY(0px) rotateY(-105deg);
}


@media screen and (min-width:481px) {
    .calendar-grid {
        max-width: 310px;
        gap: 20px;        
    }
}
@media screen and (min-width:687px) {
    .calendar-grid {
        max-width: 640px;
        grid-template-columns: repeat(6, 1fr);
    }
}
@media screen and (min-width:780px) {
    .calendar-grid {
        max-width: 750px;
        grid-template-columns: repeat(7, 1fr);
    }
}
@media screen and (min-width:1025px) {
    .calendar-grid {
        max-width: 930px;
        gap: 50px;        
    }
}