main {
    font-size: 1.5em;

    & .logo {
        max-height: 250px;
        width: 90%;
        display: block;
        margin: auto;
    }

    & h1, & h2 {
        text-align: center;
        font-size: 1.3em;
        margin-block: var(--margin-md);

        &:first-child {
            margin-block-start: 0;
        }
    }

    & h2, & h3 {
        font-family: 'Architects Daughter', sans-serif;
        color: var(--color-primary);
    }

    & h3 {
        font-size: 1.1em;
        margin-block-end: var(--margin-sm);
    }

    & .portfolio {
        display: grid;
        grid-template-columns: 1fr auto auto;
        gap: var(--margin-md);
        align-items: center;

        & .checkbox li {
            padding-inline-start: 3ch;

            &::before {
                color: #3cc43c;
                content: '✓';
            }
        }

        & .separator-vertical {
            align-self: stretch;
        }

        & .separator-horizontal {
            display: none;
        }
    }
}

@media screen and (max-width: 1000px) {
    main {
        & .portfolio {
            display: grid;
            grid-template-columns: auto;

            li {
                margin-block: var(--margin-xs);
            }

            & .separator-vertical {
                display: none;
            }

            & .separator-horizontal {
                display: block;
                margin: auto;

                svg {
                    transform: scaleX(2);
                }
            }
        }
    }
}