.summary {
    grid-row: 15 / span 87;
    grid-column: 7 / span 35;
}

.star {
    grid-row: 12 / span 11;
    grid-column: 38 / span 6;
    animation-name: wobble;
    animation-duration: 0.7s;
    animation-iteration-count: infinite;
    transition: ease-in-out;
    opacity: 1;
    mix-blend-mode: difference;
    transition-duration: 0.7s;
    image-rendering: pixelated;
}

.star:hover {
    transform: scaleX(2);
}

.thegang {
    grid-row: 11 / span 21;
    grid-column: 70 / span 28;
}
.logo {
    grid-row: 34 / span 20;
    grid-column: 84 / span 16;
}
.saxfloor {
    grid-row: 71 / span 28;
    grid-column: 78 / span 20;
}
.wealwayshavefun {
    grid-row: 53 / span 20;
    grid-column: 72 / span 24;
}
.thegang,.logo,.saxfloor,.wealwayshavefun {
    transition: ease-in-out;
    transition-duration: 0.2s;
}
.thegang:hover,.logo:hover,.saxfloor:hover,.wealwayshavefun:hover {
    scale: 0.9;
}

@keyframes wobble {
    from {
        rotate: -10deg;
        scale: 0.8;
    }
    50% {
        rotate: 10deg;
        scale: 1.1
    }
    to {
        rotate: -10deg;
        scale: 0.8
    }
}

@media screen and (max-width: 410px) {
    .summary {
        grid-row: 8 / span 28;
        grid-column: 1 / span 100;
    }

    .star {
        grid-row: 7 / span 4;
        grid-column: 80 / span 20;
    }

    .thegang {
        grid-row: 37 / span 6;
        grid-column: 5 / span 90;
    }
    .logo {
        grid-row: 44 / span 12;
        grid-column: 5 / span 90;
    }
    .saxfloor {
        grid-row: 67 / span 16;
        grid-column: 5 / span 90;
    }
    .wealwayshavefun {
        grid-row: 57 / span 8;
        grid-column: 5 / span 90;
    }
}