@font-face {
    font-family:'Poppins';
    src: url('../fonts/poppins-regular.woff2') format('woff2');
    font-weight:normal;
    font-style:normal;
}

.grid-container {
    max-width:80rem;
}

body {
    font-family:'Poppins';line-height:1.2;
    & p {
        line-height:1.2;
    }
    & main {
        position:relative;
        & h1 {
            position:absolute;top:-5rem;left:-5rem;width:55vw;height:auto;aspect-ratio:1;z-index:1;display:flex;align-items:center;justify-content:center;flex-direction:column;
            &::before {
                content:'';position:absolute;top:0;left:0;width:100%;height:auto;aspect-ratio:1;border-radius:50%;background:black;z-index:-1;
            }
            & img {
                width:7rem;height:auto;margin-right:7rem;
            }
            & span {
                color:white;font-size:1rem;text-transform:uppercase;width:7rem;text-align:left;margin-top:0.5rem;margin-right:7rem;letter-spacing:1px;margin-bottom:0;
            }
        }
        & section {
            position:relative;
            & .cell {
                z-index:1;
                & .grid {
                    display:grid;grid-template-columns:repeat(3,1fr);gap:.25rem;margin-top:18vh;
                    & > div {
                        flex-direction:column;display:flex;align-items:center;justify-content:flex-start;gap:.25rem;
                        & p {
                            padding:1rem 0;margin:0;
                        }
                        &:first-of-type {
                            & p {
                                font-size:.9rem;color:#a1a1a1;
                            }
                        }
                        &:last-of-type {
                            justify-content:flex-end;
                        }
                    }
                }
            }
            &#contact {
                margin-top:3rem;
                & a[href^="mailto:"] {
                    background:black;color:white;text-decoration:none;padding:4rem 2rem;position:relative;font-size:1rem;border-top-left-radius:3rem;display:flex;align-items:center;justify-content:center;
                    &::after {
                        content:'...';position:absolute;bottom:0;right:0;font-size:10rem;color:white;line-height:1;letter-spacing:-10px;
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 640px) {
    body {
        & main {
            & h1 {
                position:relative;width:100%;height:auto;display:flex;align-items:center;justify-content:center;flex-direction:column;margin:0;top:0;left:0;margin-top:-4rem;
                &::before {
                    width:90%;left:5%;
                }
                & img {
                    width:5rem;height:auto;margin-right:0;
                }
                & span {
                    width:5rem;height:auto;margin-right:0;font-size:.8rem;line-height:1.1;
                }
            }
            & section {
                & .cell {
                    & .grid {
                        grid-template-columns:1fr;gap:1rem;margin-top:0;
                        & > div {
                            & p {
                                text-align:center;
                            }
                            &:last-of-type {
                                justify-content:center;
                            }
                        }
                    }
                }
            }
        }
    }
}