.home {
    height: 100%;
    display: flex;
    padding: 1em 0;
}

.home .uniformSpacing{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.5em;
    height: 100%;
}

.home .uniformSpacing .wrapper{
    display: flex;
    flex-direction: column;
    gap: 1.5em;
}


.home .uniformSpacing .wrapper .logo{
    display: flex;
    justify-content: flex-start;
}

.home .uniformSpacing .wrapper .logo img{
    width: 35%;
    height: auto;
}

.home .uniformSpacing .wrapper .rotateText{
    transform: matrix(0.99, -0.1, 0.1, 0.99, 0, 0);
    text-align: center;
}

.home .uniformSpacing .wrapper > div:not(.illustration){
    padding: 0 1em;
}

.home .uniformSpacing .wrapper .illustration img{
    width: 100%;
    height: auto;
}

.home .uniformSpacing .wrapper .link{
    display: flex;
    flex-direction: column;
    gap: .5em;
}

.home .uniformSpacing .dots{
    padding-top: 1em;
    display: flex;
    gap: .5em;
    justify-content: center;
}

.home .uniformSpacing .dots .dot{
    width: .5em;
    height: .5em;
    opacity: .5;
    border-radius: 100%;
}

.home .uniformSpacing .dots .dot.active{
    opacity: 1;
}

@media screen and (min-width: 900px) {
    .home {
        min-height: 100vh;
        align-items: center;
        padding: var(--desktopGutter);
        background:
                radial-gradient(circle at 82% 22%, color-mix(in srgb, var(--basicColor1) 12%, transparent), transparent 32%),
                var(--basicWhite);
    }

    .home .uniformSpacing {
        width: min(100%, var(--pageContentWidth));
        height: auto;
        justify-content: center;
    }

    .home .uniformSpacing .wrapper {
        display: grid;
        grid-template-columns: minmax(21em, .85fr) minmax(28em, 1.15fr);
        grid-template-rows: auto auto auto;
        align-items: center;
        gap: 1.5em 4em;
    }

    .home .uniformSpacing .wrapper .logo,
    .home .uniformSpacing .wrapper .containerText,
    .home .uniformSpacing .wrapper .mainLink {
        grid-column: 1;
    }

    .home .uniformSpacing .wrapper .logo img {
        width: min(70%, 13em);
    }

    .home .uniformSpacing .wrapper .containerText,
    .home .uniformSpacing .wrapper .containerText > * {
        text-align: left;
    }

    .home .uniformSpacing .wrapper .illustration {
        grid-column: 2;
        grid-row: 1 / span 3;
    }

    .home .uniformSpacing .wrapper .illustration img {
        max-height: 70vh;
        object-fit: contain;
    }
}