.about-main {
    justify-content: center;
    width: 100%;

    @media (orientation: landscape) {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
        padding: var(--space-lg);
        align-items: stretch;
    }

    @media (orientation: portrait) {
        display: flex;
        flex-direction: column;
    }

    section {
        padding: var(--space-lg);
        border: 1px solid var(--fg-p);
        border-radius: var(--radius-xl);
        background-color: var(--bg-default);

        @media (orientation: landscape) {
            margin: var(--space-lg);
        }

        @media (orientation: portrait) {
            margin: var(--space-xs);
        }

        .section-title {
            margin-bottom: var(--space-lg);
            font-size: var(--font-xl);
            color: var(--fg-float);
        }
    }

    .the-log {
        .timeline-container {
            display: flex;
            flex-direction: column;
            gap: var(--space-xl);
            margin: var(--space-xl) 0;
            position: relative;

            --date-width: calc(var(--space-xxl) * 1.5);
            --checkpoint-size: var(--space-lg);
            --checkpoint-margin-width: var(--space-sm);
            --line-overflow: var(--space-lg);

            &::before {
                content: '';
                position: absolute;
                width: var(--space-xxs);
                transform: translateX(-50%);
                top: calc(-1 * var(--line-overflow));
                bottom: calc(-1 * var(--line-overflow));
                --bg-clr: var(--fg-flare);
                --transparent-gap: calc(var(--line-overflow) + var(--space-xl));
                background: linear-gradient(to bottom,
                    transparent 0,
                    var(--bg-clr) var(--transparent-gap),
                    color-mix(in srgb, var(--bg-clr), transparent 30%) calc(100% - var(--transparent-gap)),
                    transparent 100%
                );
                filter: opacity(0.8) drop-shadow(0 0 var(--space-xxs) var(--bg-clr));
                display: block;
                z-index: 1;

                @media (min-aspect-ratio: 1.4/1) {
                    left: calc(var(--date-width) + var(--checkpoint-margin-width) + var(--checkpoint-size)/2);
                }

                @media (max-aspect-ratio: 1.4/1) {
                    left: calc(var(--checkpoint-size)/2);
                }
            }

            .timeline-item {
                align-items: center;
                justify-content: center;

                @media (min-aspect-ratio: 1.4/1) {
                    display: flex;
                    flex-direction: row;
                }

                @media (max-aspect-ratio: 1.4/1) {
                    display: grid;
                    grid-template-areas: "checkpoint content" "checkpoint date";
                }

                .timeline-date {
                    grid-area: date;
                    text-wrap: nowrap;
                    width: var(--date-width);

                    @media (min-aspect-ratio: 1.4/1) {
                        display: flex;
                        flex-flow: column-reverse nowrap;
                        text-align: right;
                    }

                    @media (max-aspect-ratio: 1.4/1) {
                        display: block;
                        text-align: left;

                        .start {
                            position: relative;
                            --pr: var(--space-sm);
                            padding-right: var(--pr);

                            &::after {
                                content: '';
                                position: absolute;
                                top: 50%;
                                right: calc(0.5 * var(--pr));
                                transform: translateY(-50%);
                                aspect-ratio: 1;
                                width: var(--space-xxs);
                                background: transparent;
                                border-radius: var(--radius-pill);
                                border: 1px solid var(--fg-abyss);
                            }
                        }
                    }

                    .start, .end {
                        .month {
                            font-size: var(--font-md);
                            color: var(--fg-deep);
                        }

                        .year {
                            font-size: var(--font-lg);
                            color: var(--fg-dim);
                        }
                    }
                }

                .timeline-checkpoint {
                    grid-area: checkpoint;
                    border: 2px solid var(--fg-glow);
                    border-radius: var(--radius-pill);
                    box-shadow: 0 0  var(--shadow-blur-md) var(--shadow-spread-lg) var(--fg-float);
                    background-color: var(--fg-dim);
                    width: var( --checkpoint-size);
                    height: var(--checkpoint-size);
                    line-height: 0;
                    margin: auto var(--checkpoint-margin-width);

                    display: flex;
                    justify-content: center;
                    align-items: center;
                    position: relative;
                    z-index: 1;

                    @media (max-aspect-ratio: 1.4/1) {
                        margin-left: 0;
                    }
                }

                .timeline-content {
                    grid-area: content;
                    border: 1px solid var(--fg-p);
                    border-radius: var(--radius-lg);
                    padding: var(--space-xs);
                    background-color: var(--bg-abyss);
                    flex: 1;

                    p {
                        color: var(--fg-p);
                    }
                }
            }
        }
    }

    .inventory-container {
        display: flex;
        flex-direction: column;

        .inventory-category {
            display: flex;
            flex-direction: column;
            background-color: var(--bg-deep);
            padding: var(--space-sm);
            border: 1px solid var(--fg-p);
            border-radius: var(--radius-lg);
            margin: var(--space-sm) 0;

            .category-subtitle {
                font-size: var(--font-lg);
                margin-bottom: var(--space-xs);
                display: flex;
                align-items: center;
                gap: var(--space-xxs);

                .icon-side {
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                }

                iconify-icon {
                    font-size: var(--font-xl);
                    &[icon="tabler:engine"] {
                        transform: translateY(-7%);
                    }
                }
            }

            .inventory-grid {
                display: flex;
                flex-wrap: wrap;
                align-items: stretch;
                justify-content: flex-start;
                gap: var(--space-md);

                .skill-card {
                    max-width: max-content;
                    border: 1px solid var(--fg-p);
                    border-radius: var(--radius-lg);
                    padding: var(--space-xs);
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    background-color: var(--bg-voidlike);

                    iconify-icon {
                        font-size: var(--font-xxl);
                    }

                    .skill-name {
                        font-size: var(--font-md);
                        margin-top: var(--space-xxs);
                        line-height: 1;
                    }
                }
            }
        }
    }
}