.calendar {
    display: grid;
    width: 500px;
    margin: auto;

    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    grid-gap: 20px;

    grid-template-areas:
                          "d23      d20     d12"
                          "d2       d14     d4"
                          "d5       d22     d16"
                          "d1       d7      d9"
                          "d10      d11     d18"
                          "d13      d3      d15"
                          "d6       d17     d8"
                          "d19      d24     d21";
}
.calendar-mini {
    width: calc(33vw - var(--sidebar-width) );
    grid-gap: 10px;
}
@media only screen and (min-width: 500px) {

    .calendar {
        grid-template-columns: repeat(6, 1fr);
        grid-template-areas:
                        "d2 d8 d8 d11 d3 d13"
                        "d5 d19 d21 d15 d3 d9"
                        "d7 d24 d24 d12 d10 d23"
                        "d16 d24 d24 d14 d18 d22"
                        "d1 d6 d4 d17 d20 d20"
    }

}

.day-1 {
    grid-area: d1;
}

.day-1 .back {
    background-color: #ff5330;
}

.day-2 {
    grid-area: d2;
}

.day-2 .back {
    background-color: #bfba26;
}

.day-3 {
    grid-area: d3;
}

.day-3 .back {
    background-color: #70ccc2;
}

.day-4 {
    grid-area: d4;
}

.day-4 .back {
    background-color: #b4a439;
}

.day-5 {
    grid-area: d5;
}

.day-5 .back {
    background-color: #ffa33f;
}

.day-6 {
    grid-area: d6;
}

.day-6 .back {
    background-color: #623a3a;
}

.day-7 {
    grid-area: d7;
}

.day-7 .back {
    background-color: #23a38f;
}

.day-8 {
    grid-area: d8;
}

.day-8 .back {
    background-color: #1ec165;
}

.day-9 {
    grid-area: d9;
}

.day-9 .back {
    background-color: #623a3a;
}

.day-10 {
    grid-area: d10;
}

.day-10 .back {
    background-color: #eec2a1;
}

.day-11 {
    grid-area: d11;
}

.day-11 .back {
    background-color: #d45d01;
}

.day-12 {
    grid-area: d12;
}

.day-12 .back {
    background-color: #ffa33f;
}

.day-13 {
    grid-area: d13;
}

.day-13 .back {
    background-color: #ff5330;
}

.day-14 {
    grid-area: d14;
}

.day-14 .back {
    background-color: #1ec165;
}

.day-15 {
    grid-area: d15;
}

.day-15 .back {
    background-color: #ffa33f;
}

.day-16 {
    grid-area: d16;
}

.day-16 .back {
    background-color: #623a3a;
}

.day-17 {
    grid-area: d17;
}

.day-17 .back {
    background-color: #70ccc2;
}

.day-18 {
    grid-area: d18;
}

.day-18 .back {
    background-color: #bfba26;
}

.day-19 {
    grid-area: d19;
}

.day-19 .back {
    background-color: #70ccc2;
}

.day-20 {
    grid-area: d20;
}

.day-20 .back {
    background-color: #1ec165;
}

.day-21 {
    grid-area: d21;
}

.day-21 .back {
    background-color: #23a38f;
}

.day-22 {
    grid-area: d22;
}

.day-22 .back {
    background-color: #eec2a1;
}

.day-23 {
    grid-area: d23;
}

.day-23 .back {
    background-color: #1ec165;
}

.day-24 {
    grid-area: d24;
}

.day-24 .back {
    background-color: #f0563d;
}

.calendar input {
    display: none;
}

.calendar label {
    perspective: 1000px;
    transform-style: preserve-3d;
    cursor: pointer;

    display: flex;
    min-height: 100%;
    width: 100%;
    height:72px;
}
.calendar-mini label {
    height:52px;
}
.calendar-card .card-body {
    background-size: 500px;
    background-repeat: repeat;
    background-position: top right;
    background-image:linear-gradient(180deg, rgba(0, 0, 0, 0.815) 0%,
     rgba(0, 0, 0, 0.781) 100%),
     url("https://i.ibb.co/BVJQgzr/chritsmas2.png");
}
.calendar-card-mini .card-body {
    background-size: 250px;
}
.door {
    width: 100%;
    transform-style: preserve-3d;
    transition: all 300ms;
}
.door .front {
    background-color: var(--color-4);
    font-weight:italic;
    color:var(--text-color-1) !important;
    font-family: 'Kalam', cursive;
    border-radius:20px;
    font-size: 25px;
}

.calendar-mini .door .front {
    font-size: 15px;
    border-radius:10px;
}
.door .front:hover {
    cursor:default;
}
.door .front.active {
    background-size:auto 160%;
    background-position:center center;
    background-repeat: no-repeat;
    background-image:url('https://img.freepik.com/premium-vector/christmas-illustration-with-circle-frame-white-snowflakes-purple-background_444390-16857.jpg?w=740');
    color:white !important;
    transition: all 1s;
}
.day-8 .door .front.active,.day-20 .door .front.active {
    background-size:160% auto;
}
.door .front.active:hover {
    background-size:auto 130%;
    transition: all 0.5s;
}
.day-8 .door .front.active:hover,.day-20 .door .front.active:hover {
    background-size:130% auto;
    transition: all 0.5s;
}
.door .front.disabled {
    background-color: rgba(255, 255, 255, 0.075);
    backdrop-filter: blur(7px);
    transition: all 300ms;
}

.door form button {
    height: 100%;
    width: 100%;
}

.door div, .door form {
    position: absolute;
    height: 100%;
    width: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;


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

    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
}

.door .back {
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    transform: rotateY(180deg);
    border-radius:20px;
}

:checked + .door {
    transform: rotateY(180deg);
}

.calendar button {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
}