main {
    & > .content {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;

        & .contact {
            border: 1px solid var(--silk-gray);
            border-radius: 2px;

            & .top {
                display: flex;
                flex-direction: column;
                gap: 8px;

                padding: 12px 16px;
                border-bottom: 1px solid var(--silk-gray);

                & .name {
                    display: flex;
                    align-items: center;
                    
                    height: 24px;
                }

                & .email {
                    font-size: 14px;
                    color: var(--stone-gray);
                    text-decoration: underline;
                }
            }

            & .bottom {
                display: flex;
                justify-content: space-between;
                align-items: end;

                padding: 12px 16px;

                & .date {
                    font-size: 12px;
                    color: var(--stone-gray);
                }

                & button {
                    all: unset;
                    cursor: pointer;
                    
                    & svg path {
                        stroke: var(--stone-gray);
                        transition: .25s;
                    }

                    &:hover svg path {
                        stroke: var(--black);
                    }
                }
            }
        }
    }

    & .contact-read {
        display: flex;
        flex-direction: column;
        gap: 32px;

        margin-top: -32px;

        & .back {
            display: flex;

            width: fit-content;
        }

        & .contacted {
            display: flex;
            flex-direction: column;
            gap: 8px;

            & .bottom {
                display: flex;
                gap: 8px;

                font-size: 14px;
                color: var(--stone-gray);

                & .bar {
                    width: 1px;
                    height: auto;

                    background: var(--silk-gray);
                }
            }
        }
    }
}

section {
    & .section-title {
        font-size: 32px;
        text-transform: capitalize;
    }

    &.admin {
        display: flex;
        gap: 48px;

        height: fit-content;

        & .start {
            display: flex;
            flex-direction: column;
            gap: 24px;

            width: 100%;

            font-size: 14px;

            & a {
                text-decoration: underline;
            }
        }

        & .end {
            display: flex;
            flex-direction: column;
            gap: 48px;

            width: 100%;
        }

        & form {
            display: flex;
            flex-direction: column;
            align-items: end;
            gap: 24px;

            & .input-group {
                display: flex;
                flex-direction: column;
                gap: 8px;

                width: 100%;

                & .input-title {
                    color: var(--stone-gray);
                    text-transform: capitalize;
                }

                & input {
                    display: flex;
                    align-items: center;

                    width: 100%;
                    height: 32px;

                    padding: 0 12px;
                    outline: none;
                    border-radius: 2px;
                    border: 1px solid var(--silk-gray);
                    background: transparent;
                    transition: .25s;

                    &:focus {
                        border-color: var(--black);
                        background: var(--white);
                    }
                }

                & textarea {
                    width: 100%;

                    padding: 7px 12px;
                    border-radius: 2px;
                    border: 1px solid var(--silk-gray);
                    outline: none;
                    min-width: 100%;
                    max-width: min-content;
                    background: transparent;
                    transition: .25s border, background;

                    &:focus {
                        border-color: var(--black);
                        background: var(--white);
                    }
                }
            }

            & button {
                border: none;
                background: none;
                cursor: pointer;
                font-size: 16px;
            }
        }

        & .border {
            width: 2px;
            height: auto;

            background: var(--silk-gray);
        }

        & .text-group {
            display: flex;
            flex-direction: column;
            gap: 24px;

            & .title {
                font-size: 64px;
            }

            & .subtitle {
                color: var(--stone-gray);
            }
        }

        & .button-group {
            display: flex;
            gap: 24px;

            & div {
                display: flex;
                align-items: center;

                height: 32px;

                padding: 0 12px;
                border: 1px solid var(--silk-gray);
                border-radius: 2px;
                transition: .25s;

                &:hover {
                    border-color: var(--black);
                    background: var(--white);
                }
            }
        }
    }
}