/* 
    Page 
*/

/* Home Page */

.home {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
    padding: 1rem;
    margin-top: 9rem;
}

.home-parameters {
    grid-column: 1/-1;
    grid-row: 2;
}

.home-parameters .label {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}

.home-parameters input {
    width: 100%;
}

.home-parameters-buttons {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
}



.home-parameters-buttons .button {
    flex-grow: 1;
}

.home-canvas {
    grid-column: 1/-1;
    height: 50vh;
    background-color: rgba(30, 30, 30, 1);
    border-radius: 8px;
    overflow: hidden;
}

.home-canvas canvas {
    width: 100%;
}

/* Tablet (> 768px) */
@media (min-width: 48em) {
    .home {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        margin-top: 0;
    }
    
    .home-parameters {
        grid-column: 1/4;
        grid-row: 3;
    }

    .home-canvas {
        grid-column: 5/-1;
        grid-row: 1/4;
        height: 75vh;
    }
}



/* 
    Blocks 
*/
.block-text {
    grid-column: 1/-1;
}

/* Tablet (> 768px) */
@media (min-width: 48em) {
    .block-heading {
        grid-column: 4/-1;
    }

    .block-text.large {
        grid-column: 5/-2;
    }

    .block-text {
        grid-column: 6/-3;
    }

}

/* 
    Components
*/

.button {
    border-radius: 4px;
    background-color: rgba(30, 30, 30, 1);
    padding: 10px 20px;
    text-align: center;
    transition: 300ms ease;
}

.button:hover,
.button.active {
    background-color: rgba(70, 70, 70, 1);
}


/* 
    Footer 
*/

.footer {
    padding: 1rem;
}


.footer-logo {
    width: 5rem;
}

/* Tablet (> 768px) */
@media (min-width: 48em) {
    .footer {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        padding: 1rem;
    }

    .footer-copyright {
        grid-column: 5/-1;
    }

    .footer-logos {
        position: fixed;
        bottom: 0;
        left: 0;
        padding: 1rem;
    }
}