main.legal-wrapper{
    grid-column: 1 / span 8; /* position */
    grid-row: 3 / 4; 
    display: grid;
    grid-template-columns: 1fr;  /* layout */  
}

.legal-section{
    display: grid;
    grid-template-columns: repeat(8, 1fr); 
}

.legal-section:first-of-type{
    margin-bottom: var(--spacer-md);
}

h3.legal-title,
.legal-section h4{
    grid-column: 1 / span 1;
}

.legal-section .body{
    grid-column: 2 / span 5;
}

.legal-section a:hover{
    color: var(--accent-bg-color);
}

button#close-legal{
    position: absolute;
    top:var(--spacer-sm);
    right: var(--spacer-sm);
}

/* ------------------------ */
/* -------Responsive------- */
/* ------------------------ */

/* Tablet */
@media (max-width:1100px) or (max-height:400px) or  (orientation: portrait) {

    main.legal-wrapper {
        grid-row: 1;
        grid-column: 5 / span 4;
        display: block;
    }

    .legal-section{
        display: block;
        margin-bottom: var(--spacer-md);
    }

    .legal-section h3{
        margin-bottom: var(--spacer-md);
    }

    #close-legal{
        display: none;
    }
}

/* phone */
@media (max-width:568px) {
    main.legal-wrapper {
        grid-row: 2;
        grid-column: 1 / span 8;
        grid-template-columns: repeat(1, 1fr);
        padding: var(--spacer-sm);
    }
}