body {
    display: flex;
    align-items: center;
    justify-content: center;
}

a,
a:visited {
    color: var(--text);
    text-decoration: none;
}

.grid-container {
    display: grid;
    height: 100vh;
    width: 100vw;
    max-width: 600px;
    max-height: 400px;

    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(9, minmax(0, 1fr));
    gap: var(--padd);
}

.cell {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eee;
    text-transform: uppercase;
    gap: var(--padd);
}

.cell:hover {
    background: #ddd;
    color: white;
}

.cell:hover a {
    color: white;
}

.cell:hover path {
    fill: white;
}

.main {
    grid-column: 3 / span 3;
    grid-row: 2 / span 2;

    font-size: 16px;
    font-weight: bold;
}

.vibes {
    grid-column: 6 / span 8;
    grid-row: 1 / span 4;

    font-size: 64px;
    font-weight: bold;
}

.work {
    grid-column: 1 / span 5;
    grid-row: 4 / span 4;
}

.photography {
    grid-column: 6 / span 3;
    grid-row: 5 / span 4;
}

.writing {
    grid-column: 9 / span 3;
    grid-row: 5 / span 4;
}

.socials {
    grid-column: 2 / span 4;
    grid-row: 8 / span 3;
}

#x-logo {
    fill: black;
}