.home-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

@media screen and (max-width: 992px) and (min-height: 1080px) {
    .home-grid {
        grid-template-columns: 3fr 2fr;
    }
}
@media screen and (max-width: 576px) {
    .home-grid {
        grid-template-columns: 1fr;
    }
}

/*Flower nav*/

/*  Manual child-count
    Max supported petals: 12 */
.flower-nav {--count: 1;}
.flower-nav:has(.petal:nth-child(2)) {--count: 2;}
.flower-nav:has(.petal:nth-child(3)) {--count: 3;}
.flower-nav:has(.petal:nth-child(4)) {--count: 4;}
.flower-nav:has(.petal:nth-child(5)) {--count: 5;}
.flower-nav:has(.petal:nth-child(6)) {--count: 6;}
.flower-nav:has(.petal:nth-child(7)) {--count: 7;}
.flower-nav:has(.petal:nth-child(8)) {--count: 8;}
.flower-nav:has(.petal:nth-child(9)) {--count: 9;}
.flower-nav:has(.petal:nth-child(10)) {--count: 10;}
.flower-nav:has(.petal:nth-child(11)) {--count: 11;}
.flower-nav:has(.petal:nth-child(12)) {--count: 12;}
.flower-nav {
    --step: calc(360deg / var(--count));
    --scale: 1.25;
    position: relative;
    width: 0;
    height: 0;
    margin: 250px auto;
}

.petal-img, .petal-label, .flower-center-img {
    --text-translate: -650%;
    position: absolute;
    transform-origin: bottom center;
    transition: transform 150ms ease;
}
.petal{
    &:nth-child(odd) .petal-img{
        z-index: 1;
    }
    &:nth-child(even) .petal-img{
        z-index: 0;
    }
}
.petal-img {
    width: 100px;
    transform: 
        translate(-50%, -100%)
        rotate(calc(var(--i) * var(--step)));
}
.petal-label {
    width: max-content;
    text-align: center;
    color: white;
    z-index: 3;
    transform-origin: top left;
    transform:
        translate(-50%, -50%)
        rotate(calc(var(--i) * var(--step)))
        translate(0px, var(--text-translate))
        rotate(calc(var(--i) * var(--step) * -1));
}
.petal:hover {
    .petal-img {
        transform: 
                translate(-50%, -100%)
                rotate(calc(var(--i) * var(--step)))
                scale(var(--scale));
    }
    .petal-label {
        transform:
            scale(var(--scale))
            translate(-50%, -50%)
            rotate(calc(var(--i) * var(--step)))
            translate(0px, var(--text-translate))
            rotate(calc(var(--i) * var(--step) * -1));
    }
}
.flower-center-img {
    width: 100px;
    transform-origin: center;
    transform: 
        translate(-50%, -50%);
    &:hover{
        transform:
            translate(-50%, -50%)
            scale(1.25);
    }
    z-index: 2;
}
@media  screen and (max-width: 992px) and (max-height: 576px),
        screen and (max-width: 768px) {
    .petal-img, .flower-center-img {
        --text-translate: -500%;
        width: 75px;
    }
    .petal-label {
        --text-translate: -500%;
        font-size: medium;
    }
}