.cheese-buttons-grid {
    position: fixed;
    left: -100%;            
    width: 70vh;
    height: 70vh;
    opacity: 0;
    transition-delay: 1.5s;
    transition: opacity 0.5s ease-out;
    z-index: 50;
}

.cheese-buttons-grid.cutting {
    left: 50%;
    opacity: 1;
    pointer-events: auto;
}

.cheese-buttons-grid.cutting[data-cheese="petite"] {
    left: 40%;
    top: 21%;
    width: 45vh;
    height: 45vh;
    transform: rotate(-86deg);
}

.cheese-buttons-grid.cutting[data-cheese="camamber"] {
    left: 40%;
    top: 21%;
    width: 45vh;
    height: 45vh;
    transform: rotate(-86deg);
}

.cheese-buttons-grid.cutting[data-cheese="blue"] {
    left: 50%;
    top: 29%;
    right: auto;
    width: 36%;
    transform: rotate(-40deg);
}

.cheese-buttons-grid.cutting[data-cheese="fondant"] {
    top: 7%;
    left: 31%;
    right: auto;
}

.cheese-button {
    position: absolute;
    background: linear-gradient(to right, #FFE680, #FAB041, #FFE680);
    border: none;
    width: auto;
    border-radius: 16px;
    padding: 1.4vh 3vh;
    cursor: pointer;
    color: #442F1E;
    font-weight: 600;
    font-size: 2.7vh;
    text-align: center;
    font-family: 'Circe Rounded', Arial, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    line-height: 100%;
    overflow: hidden;
    transition: transform 0.2s ease-out;
}

.cheese-buttons-grid[data-cheese="petite"] .cheese-button {
    height: fit-content;
    transform: rotate(86deg);
}

.cheese-buttons-grid[data-cheese="camamber"] .cheese-button {
    height: fit-content;
    transform: rotate(86deg);
}

.cheese-buttons-grid[data-cheese="blue"] .cheese-button {
    height: fit-content;
    transform: rotate(40deg);
}

.cheese-buttons-grid[data-cheese="fondant"] .cheese-button {
    height: fit-content;
}

.cheese-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: #fff;
    transition: all 0.3s ease;
    z-index: 1;
}

.cheese-button::after {
    content: '';
    position: absolute;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100%;
    background: #fff;
    transition: all 0.3s ease;
    z-index: 1;
}

.cheese-button:hover::before {
    left: 0;
}

.cheese-button:hover::after {
    right: 0;
}

.cheese-button span {
    position: relative;
    z-index: 2;
}

.cheese-buttons-grid[data-cheese="petite"] .cheese-button:nth-child(1) {
    top: 83%;
    left: 26%;
    width: max-content;
}

.cheese-buttons-grid[data-cheese="petite"] .cheese-button:nth-child(2) {
    left: 47%;
    top: 168%;
    width: max-content;
}

.cheese-buttons-grid[data-cheese="petite"] .cheese-button:nth-child(3) {
    top: 130%;
    left: -41%;
    width: max-content; 
}

.cheese-buttons-grid[data-cheese="petite"] .cheese-button:nth-child(4) {
    left: 6%;
    top: 110%;
    width: max-content;
}

.cheese-buttons-grid[data-cheese="petite"] .cheese-button:nth-child(5) {
    top: 47%;
    left: -53%;
    width: max-content;
}

.cheese-buttons-grid[data-cheese="petite"] .cheese-button:nth-child(6) {
    left: -15%;
    top: -11%;
    width: max-content;
}

.cheese-buttons-grid[data-cheese="petite"] .cheese-button:nth-child(7) {
    top: -19%;
    right: 9%;
    width: max-content;
}

.cheese-buttons-grid[data-cheese="petite"] .cheese-button:nth-child(8) {
    right: 13%;
    top: -112%;
    width: max-content;
}

.cheese-buttons-grid[data-cheese="camamber"] .cheese-button:nth-child(1) {
    top: 91%;
    left: 17%;
    width: max-content;
}

.cheese-buttons-grid[data-cheese="camamber"] .cheese-button:nth-child(2) {
    left: 47%;
    top: 168%;
    width: max-content;
}

.cheese-buttons-grid[data-cheese="camamber"] .cheese-button:nth-child(3) {
    top: 130%;
    left: -41%;
    width: max-content; 
}

.cheese-buttons-grid[data-cheese="camamber"] .cheese-button:nth-child(4) {
    left: 6%;
    top: 110%;
    width: max-content;
}

.cheese-buttons-grid[data-cheese="camamber"] .cheese-button:nth-child(5) {
    top: 47%;
    left: -53%;
    width: max-content;
}

.cheese-buttons-grid[data-cheese="camamber"] .cheese-button:nth-child(6) {
    left: -15%;
    top: -15%;
    width: max-content;
}

.cheese-buttons-grid[data-cheese="camamber"] .cheese-button:nth-child(7) {
    top: -19%;
    right: 9%;
    width: max-content;
}

.cheese-buttons-grid[data-cheese="camamber"] .cheese-button:nth-child(8) {
    right: 13%;
    top: -112%;
    width: max-content;
}

.cheese-buttons-grid[data-cheese="blue"] .cheese-button:nth-child(1) {
    top: 17%;
    left: 46%;
    width: max-content;
}

.cheese-buttons-grid[data-cheese="blue"] .cheese-button:nth-child(2) {
    left: 103%;
    top: 49%;
    width: max-content;
}

.cheese-buttons-grid[data-cheese="blue"] .cheese-button:nth-child(3) {
    top: 97%;
    left: 38%;
    width: max-content;
}

.cheese-buttons-grid[data-cheese="blue"] .cheese-button:nth-child(4) {
    left: 59%;
    top: 52%;
    width: max-content;
}

.cheese-buttons-grid[data-cheese="blue"] .cheese-button:nth-child(5) {
    top: 60%;
    left: -17%;
    width: max-content;
}

.cheese-buttons-grid[data-cheese="blue"] .cheese-button:nth-child(6) {
    left: -25%;
    top: 8%;
    width: max-content;
}

.cheese-buttons-grid[data-cheese="blue"] .cheese-button:nth-child(7) {
    top: -73%;
    right: 111%;
    width: max-content;
}

.cheese-buttons-grid[data-cheese="blue"] .cheese-button:nth-child(8) {
    right: 72%;
    top: -32%;
    width: max-content;
}

.cheese-buttons-grid[data-cheese="fondant"] .cheese-button:nth-child(1) {
    top: 36%;
    left: 81%;
    width: max-content;
}                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 

.cheese-buttons-grid[data-cheese="fondant"] .cheese-button:nth-child(2) {
    left: 125%;
    top: 31%;
    width: max-content;
}

.cheese-buttons-grid[data-cheese="fondant"] .cheese-button:nth-child(3) {
    top: 106%;
    left: 105%;
    width: max-content;
}

.cheese-buttons-grid[data-cheese="fondant"] .cheese-button:nth-child(4) {
    left: 85%;
    top: 74%;
    width: max-content;
}

.cheese-buttons-grid[data-cheese="fondant"] .cheese-button:nth-child(5) {
    top: 113%;
    left: 42%;
    width: max-content;
}

.cheese-buttons-grid[data-cheese="fondant"] .cheese-button:nth-child(6) {
    left: 11%;
    top: 64%;
    width: max-content;
}

.cheese-buttons-grid[data-cheese="fondant"] .cheese-button:nth-child(7) {
    top: 44%;
    right: 66%;
    width: max-content;
}

.cheese-buttons-grid[data-cheese="fondant"] .cheese-button:nth-child(8) {
    right: 117.5%;
    top: 28%;
    width: max-content;
}
/* 
@media (max-width: 1500px) {
    .cheese-buttons-grid[data-cheese="petite"] .cheese-button:nth-child(1) {
        top: 52%;
        left: 51%;
        width: max-content;
    }
    
    .cheese-buttons-grid[data-cheese="petite"] .cheese-button:nth-child(2) {
        left: 63%;
        top: 104%;
        width: max-content;
    }
    
    .cheese-buttons-grid[data-cheese="petite"] .cheese-button:nth-child(3) {
        top: 82%;
        left: 10%;
        width: max-content; 
    }
    
    .cheese-buttons-grid[data-cheese="petite"] .cheese-button:nth-child(4) {
        left: 39%;
        top: 68%;
        width: max-content;
    }
    
    .cheese-buttons-grid[data-cheese="petite"] .cheese-button:nth-child(5) {
        top: 29%;
        left: 0%;
        width: max-content;
    }
    
    .cheese-buttons-grid[data-cheese="petite"] .cheese-button:nth-child(6) {
        left: 24%;
        top: -9%;
        width: max-content;
    }
    
    .cheese-buttons-grid[data-cheese="petite"] .cheese-button:nth-child(7) {
        top: -13%;
        right: 8%;
        width: max-content;
    }
    
    .cheese-buttons-grid[data-cheese="petite"] .cheese-button:nth-child(8) {
        right: 10%;
        top: -72%;
        width: max-content;
    }
} */

@media (max-width: 1450px) {
    .cheese-buttons-grid[data-cheese="fondant"] .cheese-button:nth-child(2) {
        left: 119%;
        top: 34%;
        width: max-content;
    }
}

@media (max-width: 1050px) {
    .desktop-back-arrow {
        display: none;
    }

    .cheese-buttons-grid {
        position: fixed;
        left: -200%;
        width: 85vw;
        height: 85vw;
        max-width: 50vh;
        max-height: 50vh;
        opacity: 0;
        transition: opacity 0.5s ease-out;
        transition-delay: 1.5s;
        z-index: 2;
    }


    .cheese-buttons-grid.cutting[data-cheese="petite"] {
        transform: rotate(0deg);
    }
    
    .cheese-buttons-grid.cutting[data-cheese="camamber"] {
        transform: rotate(0deg);
    }
    
    .cheese-buttons-grid.cutting[data-cheese="blue"] {
        transform: rotate(0deg);
    }
    
    .cheese-buttons-grid.cutting[data-cheese="fondant"] {

    }

    .cheese-button {
        padding: 12px;
        font-weight: 400;
        left: 50%;
        font-size: 4vw;
    }

    .cheese-buttons-grid[data-cheese="petite"] .cheese-button {
        transform: rotate(0deg);
    }
    
    .cheese-buttons-grid[data-cheese="camamber"] .cheese-button {
        transform: rotate(0deg);
    }
    
    .cheese-buttons-grid.cutting {
        opacity: 1;
        pointer-events: auto;
        left: 43%;
        top: 40%;
    }
    
    .cheese-buttons-grid.cutting[data-cheese="petite"] {
        width: 60vw;
        height: 60vw;
        left: 20%;
        top: 40%;
        transform: rotate(0deg);
    }
    
    .cheese-buttons-grid.cutting[data-cheese="camamber"] {
        width: 60vw;
        height: 60vw;
        left: 20%;
        top: 40%;
        transform: rotate(0deg);
    }
    
    .cheese-buttons-grid.cutting[data-cheese="blue"] {
        left: 5%;
        top: 48%;
        width: 38vh;
        height: 38vh;
        transform: rotate(50deg);
    }

    .cheese-buttons-grid[data-cheese="blue"] .cheese-button {
        transform: rotate(-50deg);
    }
    
    .cheese-buttons-grid.cutting[data-cheese="fondant"] {
        left: 13%;
        top: 47%;
        width: 38vh;
        height: 38vh;
        transform: rotate(-48deg);
    }
    
    .cheese-buttons-grid[data-cheese="fondant"] .cheese-button {
        transform: rotate(48deg);
    }
    
    .cheese-buttons-grid[data-cheese="petite"] .cheese-button:nth-child(1) {
        top: auto;
        bottom: -4%;
        left: auto;
        right: -1%;
    }

    .cheese-buttons-grid[data-cheese="petite"] .cheese-button:nth-child(2) {
        left: 18%;
        bottom: auto;
        top: 68%;
        right: auto;
    }
    
    .cheese-buttons-grid[data-cheese="petite"] .cheese-button:nth-child(3) {
        top: 49%;
        left: auto;
        right: 5%;
    }

    .cheese-buttons-grid[data-cheese="petite"] .cheese-button:nth-child(4) {
        left: 14%;
        top: 33%;
        right: auto;
    }

    .cheese-buttons-grid[data-cheese="petite"] .cheese-button:nth-child(5) {
        top: 8%;
        left: auto;
        right: 10%;
    }

    .cheese-buttons-grid[data-cheese="petite"] .cheese-button:nth-child(6) {
        left: auto;
        top: auto;
        right: 32%;
        bottom: 100%;
    }

    .cheese-buttons-grid[data-cheese="petite"] .cheese-button:nth-child(7) {
        top: -32%;
        bottom: auto;
        right: auto;
        left: 66%;
    }

    .cheese-buttons-grid[data-cheese="petite"] .cheese-button:nth-child(8) {
        bottom: 137%;
        right: auto;
        left: 26%;
        top: auto;
    }
    
    .cheese-buttons-grid[data-cheese="camamber"] .cheese-button:nth-child(1) {
        top: auto;
        bottom: -4%;
        left: auto;
        right: -1%;
    }

    .cheese-buttons-grid[data-cheese="camamber"] .cheese-button:nth-child(2) {
        left: 18%;
        bottom: auto;
        top: 68%;
        right: auto;
    }
    
    .cheese-buttons-grid[data-cheese="camamber"] .cheese-button:nth-child(3) {
        top: 49%;
        left: auto;
        right: 5%;
    }

    .cheese-buttons-grid[data-cheese="camamber"] .cheese-button:nth-child(4) {
        left: 14%;
        top: 33%;
        right: auto;
    }

    .cheese-buttons-grid[data-cheese="camamber"] .cheese-button:nth-child(5) {
        top: 8%;
        left: auto;
        right: 10%;
    }

    .cheese-buttons-grid[data-cheese="camamber"] .cheese-button:nth-child(6) {
        left: auto;
        top: auto;
        right: 32%;
        bottom: 100%;
    }

    .cheese-buttons-grid[data-cheese="camamber"] .cheese-button:nth-child(7) {
        top: -32%;
        bottom: auto;
        right: auto;
        left: 66%;
    }

    .cheese-buttons-grid[data-cheese="camamber"] .cheese-button:nth-child(8) {
        bottom: 137%;
        right: auto;
        left: 26%;
        top: auto;
    }
    
    .cheese-buttons-grid[data-cheese="blue"] .cheese-button:nth-child(1) {
        top: auto;
        bottom: 58%;
        left: auto;
        right: -50%;
    }

    .cheese-buttons-grid[data-cheese="blue"] .cheese-button:nth-child(2) {
        left: 42%;
        bottom: auto;
        top: 38%;
        right: auto;
    }
    
    .cheese-buttons-grid[data-cheese="blue"] .cheese-button:nth-child(3) {
        top: -16%;
        left: auto;
        right: -14%;
    }

    .cheese-buttons-grid[data-cheese="blue"] .cheese-button:nth-child(4) {
        left: 16%;
        top: -1%;
        right: auto;
    }

    .cheese-buttons-grid[data-cheese="blue"] .cheese-button:nth-child(5) {
        top: -36%;
        left: auto;
        right: 22%;
    }

    .cheese-buttons-grid[data-cheese="blue"] .cheese-button:nth-child(6) {
        left: auto;
        top: auto;
        right: 73%;
        bottom: 100%;
    }

    .cheese-buttons-grid[data-cheese="blue"] .cheese-button:nth-child(7) {
        top: -53%;
        bottom: auto;
        right: auto;
        left: -76%;
    }

    .cheese-buttons-grid[data-cheese="blue"] .cheese-button:nth-child(8) {
        bottom: 149%;
        right: auto;
        left: -29%;
        top: auto;
    }

    .cheese-buttons-grid[data-cheese="fondant"] .cheese-button:nth-child(1) {
        top: auto;
        bottom: 48%;
        left: auto;
        right: 45%;
    }

    .cheese-buttons-grid[data-cheese="fondant"] .cheese-button:nth-child(2) {
        left: 69%;
        bottom: auto;
        top: 88%;
        right: auto;
    }
    
    .cheese-buttons-grid[data-cheese="fondant"] .cheese-button:nth-child(3) {
        top: 17%;
        left: auto;
        right: -6%;
    }

    .cheese-buttons-grid[data-cheese="fondant"] .cheese-button:nth-child(4) {
        left: 109%;
        top: 9%;
        right: auto;
    }

    .cheese-buttons-grid[data-cheese="fondant"] .cheese-button:nth-child(5) {
        top: 37%;
        left: auto;
        right: -71%;
    }

    .cheese-buttons-grid[data-cheese="fondant"] .cheese-button:nth-child(6) {
        left: auto;
        top: auto;
        right: 0%;
        bottom: 118%;
    }

    .cheese-buttons-grid[data-cheese="fondant"] .cheese-button:nth-child(7) {
        top: 103%;
        bottom: auto;
        right: auto;
        left: 14%;
    }

    .cheese-buttons-grid[data-cheese="fondant"] .cheese-button:nth-child(8) {
        bottom: 127%;
        right: auto;
        left: 89%;
        top: auto;
    }
}

@media (max-width: 768px) {
    .desktop-back-arrow {
        display: none;
    }

    .cheese-buttons-grid {
        position: fixed;
        left: -200%;
        width: 85vw;
        height: 85vw;
        max-width: 50vh;
        max-height: 50vh;
        opacity: 0;
        transition: opacity 0.5s ease-out;
        transition-delay: 1.5s;
        z-index: 2;
    }


    .cheese-buttons-grid.cutting[data-cheese="petite"] {
        transform: rotate(0deg);
    }
    
    .cheese-buttons-grid.cutting[data-cheese="camamber"] {
        transform: rotate(0deg);
    }
    
    .cheese-buttons-grid.cutting[data-cheese="blue"] {
        transform: rotate(0deg);
    }
    
    .cheese-buttons-grid.cutting[data-cheese="fondant"] {

    }

    .cheese-button {
        padding: 12px;
        font-weight: 400;
        left: 50%;
        font-size: 4vw;
        padding: 10px 12px;
    }

    .cheese-buttons-grid[data-cheese="petite"] .cheese-button {
        transform: rotate(0deg);
    }
    
    .cheese-buttons-grid[data-cheese="camamber"] .cheese-button {
        transform: rotate(0deg);
    }
    
    .cheese-buttons-grid.cutting {
        opacity: 1;
        pointer-events: auto;
        left: 43%;
        top: 40%;
    }
    
    .cheese-buttons-grid.cutting[data-cheese="petite"] {
        width: 85vw;
        height: 85vw;
        left: 5%;
        top: 40%;
        transform: rotate(0deg);
    }
    
    .cheese-buttons-grid.cutting[data-cheese="camamber"] {
        width: 85vw;
        height: 85vw;
        left: 5%;
        top: 40%;
        transform: rotate(0deg);
    }
    
    .cheese-buttons-grid.cutting[data-cheese="blue"] {
        left: 5%;
        top: 48%;
        width: 38vh;
        height: 38vh;
        transform: rotate(50deg);
    }

    .cheese-buttons-grid[data-cheese="blue"] .cheese-button {
        transform: rotate(-50deg);
    }
    
    .cheese-buttons-grid.cutting[data-cheese="fondant"] {
        left: 13%;
        top: 47%;
        width: 38vh;
        height: 38vh;
        transform: rotate(-48deg);
    }
    
    .cheese-buttons-grid[data-cheese="fondant"] .cheese-button {
        transform: rotate(48deg);
    }

    .cheese-buttons-grid[data-cheese="petite"] .cheese-button:nth-child(1) {
        top: auto;
        bottom: 75%;
        left: auto;
        right: -5%;
    }

    .cheese-buttons-grid[data-cheese="petite"] .cheese-button:nth-child(2) {
        left: 56%;
        bottom: auto;
        top: 52%;
        right: auto;
    }
    
    .cheese-buttons-grid[data-cheese="petite"] .cheese-button:nth-child(3) {
        top: 104%;
        left: auto;
        right: 2%;
    }

    .cheese-buttons-grid[data-cheese="petite"] .cheese-button:nth-child(4) {
        left: 1%;
        top: 32%;
        right: auto;
    }

    .cheese-buttons-grid[data-cheese="petite"] .cheese-button:nth-child(5) {
        top: 74%;
        left: auto;
        right: 53%;
    }

    .cheese-buttons-grid[data-cheese="petite"] .cheese-button:nth-child(6) {
        left: auto;
        top: auto;
        right: 55%;
        bottom: 89%;
    }

    .cheese-buttons-grid[data-cheese="petite"] .cheese-button:nth-child(7) {
        top: -32%;
        bottom: auto;
        right: auto;
        left: 66%;
    }

    .cheese-buttons-grid[data-cheese="petite"] .cheese-button:nth-child(8) {
        bottom: 137%;
        right: auto;
        left: 26%;
        top: auto;
    }

    .cheese-buttons-grid[data-cheese="camamber"] .cheese-button:nth-child(1) {
        top: auto;
        bottom: 79%;
        left: auto;
        right: -5%;
    }

    .cheese-buttons-grid[data-cheese="camamber"] .cheese-button:nth-child(2) {
        left: 56%;
        bottom: auto;
        top: 52%;
        right: auto;
    }
    
    .cheese-buttons-grid[data-cheese="camamber"] .cheese-button:nth-child(3) {
        top: 104%;
        left: auto;
        right: 2%;
    }

    .cheese-buttons-grid[data-cheese="camamber"] .cheese-button:nth-child(4) {
        left: 1%;
        top: 32%;
        right: auto;
    }

    .cheese-buttons-grid[data-cheese="camamber"] .cheese-button:nth-child(5) {
        top: 74%;
        left: auto;
        right: 53%;
    }

    .cheese-buttons-grid[data-cheese="camamber"] .cheese-button:nth-child(6) {
        left: auto;
        top: auto;
        right: 58%;
        bottom: 86%;
    }

    .cheese-buttons-grid[data-cheese="camamber"] .cheese-button:nth-child(7) {
        top: -32%;
        bottom: auto;
        right: auto;
        left: 66%;
    }

    .cheese-buttons-grid[data-cheese="camamber"] .cheese-button:nth-child(8) {
        bottom: 137%;
        right: auto;
        left: 26%;
        top: auto;
    }

    .cheese-buttons-grid[data-cheese="blue"] .cheese-button:nth-child(1) {
        top: 11%;
        left: 79%;
        width: max-content;
    }
    
    .cheese-buttons-grid[data-cheese="blue"] .cheese-button:nth-child(2) {
        left: -9%;
        top: -6%;
        width: max-content;
    }
    
    .cheese-buttons-grid[data-cheese="blue"] .cheese-button:nth-child(3) {
        top: 30%;
        left: 38%;
        width: max-content;
    }
    
    .cheese-buttons-grid[data-cheese="blue"] .cheese-button:nth-child(4) {
        left: -4%;
        top: -50%;
        width: max-content;
    }
    
    .cheese-buttons-grid[data-cheese="blue"] .cheese-button:nth-child(5) {
        top: -11%;
        left: 27%;
        width: max-content;
    }
    
    .cheese-buttons-grid[data-cheese="blue"] .cheese-button:nth-child(6) {
        left: -65%;
        top: -58%;
        width: max-content;
    }
    
    .cheese-buttons-grid[data-cheese="blue"] .cheese-button:nth-child(7) {
        top: -53%;
        right: auto;
        left: -34%;
        width: max-content;
    }
    
    .cheese-buttons-grid[data-cheese="blue"] .cheese-button:nth-child(8) {
        right: auto;
        left: 84%;
        top: 46%;
        width: max-content;
    }
    
    .cheese-buttons-grid[data-cheese="fondant"] .cheese-button:nth-child(1) {
        top: 56%;
        left: -13%;
        width: max-content;
    }
    
    .cheese-buttons-grid[data-cheese="fondant"] .cheese-button:nth-child(2) {
        left: 17%;
        top: 114%;
        width: max-content;
    }
    
    .cheese-buttons-grid[data-cheese="fondant"] .cheese-button:nth-child(3) {
        top: 93%;
        left: 64%;
        width: max-content;
    }
    
    .cheese-buttons-grid[data-cheese="fondant"] .cheese-button:nth-child(4) {
        left: 91%;
        top: 38%;
        width: max-content;
    }
    
    .cheese-buttons-grid[data-cheese="fondant"] .cheese-button:nth-child(5) {
        top: 25%;
        left: 18%;
        width: max-content;
    }
    
    .cheese-buttons-grid[data-cheese="fondant"] .cheese-button:nth-child(6) {
        left: 70%;
        top: -29%;
        width: max-content;
    }
    
    .cheese-buttons-grid[data-cheese="fondant"] .cheese-button:nth-child(7) {
        top: 14%;
        right: auto;
        left: 112%;
        width: max-content;
    }
    
    .cheese-buttons-grid[data-cheese="fondant"] .cheese-button:nth-child(8) {
        top: -39%;
        left: 88%;
        width: max-content;
    }
}

@media (max-width: 600px) {
    .cheese-buttons-grid[data-cheese="petite"] .cheese-button:nth-child(7) {
        top: -35%;
        bottom: auto;
        right: auto;
        left: 51%;
    }

    .cheese-buttons-grid[data-cheese="petite"] .cheese-button:nth-child(8) {
        bottom: 144%;
        right: auto;
        left: 19%;
        top: auto;
    }

    .cheese-buttons-grid[data-cheese="camamber"] .cheese-button:nth-child(7) {
        top: -35%;
        bottom: auto;
        right: auto;
        left: 51%;
    }

    .cheese-buttons-grid[data-cheese="camamber"] .cheese-button:nth-child(8) {
        bottom: 144%;
        right: auto;
        left: 19%;
        top: auto;
    }

    .cheese-buttons-grid[data-cheese="blue"] .cheese-button:nth-child(1) {
        top: 47%;
        left: 59%;
        width: max-content;
    }
    
    .cheese-buttons-grid[data-cheese="blue"] .cheese-button:nth-child(2) {
        left: -6%;
        top: -10%;
        width: max-content;
    }
    
    .cheese-buttons-grid[data-cheese="blue"] .cheese-button:nth-child(3) {
        top: 41%;
        left: 24%;
        width: max-content;
    }
    
    .cheese-buttons-grid[data-cheese="blue"] .cheese-button:nth-child(4) {
        left: -39%;
        top: -1%;
        width: max-content;
    }
    
    .cheese-buttons-grid[data-cheese="blue"] .cheese-button:nth-child(5) {
        top: 18%;
        left: -1%;
        width: max-content;
    }
    
    .cheese-buttons-grid[data-cheese="blue"] .cheese-button:nth-child(6) {
        /* left: -76%;
        top: -43%; */
        right: auto;
        left: 87%;
        top: 60%;
        width: max-content;
    }
    
    .cheese-buttons-grid[data-cheese="blue"] .cheese-button:nth-child(7) {
        right: auto;
        /* left: 87%;
        top: 60%; */
        left: -75%;
        top: -42%;
        width: max-content;
    }
    
    .cheese-buttons-grid[data-cheese="blue"] .cheese-button:nth-child(8) {
        top: -32%;
        right: auto;
        left: -43%;
        width: max-content;
    }

    .cheese-buttons-grid[data-cheese="fondant"] .cheese-button:nth-child(1) {
        top: 37%;
        left: -2%;
        width: max-content;
    }
    
    .cheese-buttons-grid[data-cheese="fondant"] .cheese-button:nth-child(2) {
        left: 27%;
        top: 91%;
        width: max-content;
    }
    
    .cheese-buttons-grid[data-cheese="fondant"] .cheese-button:nth-child(3) {
        top: 61%;
        left: 64%;
        width: max-content;
    }
    
    .cheese-buttons-grid[data-cheese="fondant"] .cheese-button:nth-child(4) {
        left: 70%;
        top: 36%;
        width: max-content;
    }
    
    .cheese-buttons-grid[data-cheese="fondant"] .cheese-button:nth-child(5) {
        top: 19%;
        left: 0%;
        width: max-content;
    }
    
    .cheese-buttons-grid[data-cheese="fondant"] .cheese-button:nth-child(6) {
        left: 70%;
        top: -29%;
        width: max-content;
    }
    
    .cheese-buttons-grid[data-cheese="fondant"] .cheese-button:nth-child(7) {
        top: -15%;
        right: auto;
        left: 96%;
        width: max-content;
    }
    
    .cheese-buttons-grid[data-cheese="fondant"] .cheese-button:nth-child(8) {
        top: -62%;
        left: 91%;
        width: max-content;
    }
}