main {
    width: 100%;
    max-width: 62.5rem;
    margin-inline: auto;
    margin-block: 10rem 0;
    padding-inline: 1rem;
    section:first-child {
        margin-top: 8rem;
        margin-bottom: 4rem;
        text-align: center;
        h2 {
            margin-bottom: 1rem;
            font-size: 2.5rem;
            color: var(--primary);
        }
        p {
            max-width: 40rem;
            margin-inline: auto;
        }
    }
    section:last-child {
        position: relative;
		> h2 {
        margin-left: 3rem;
        margin-bottom: 2rem;
    }
        &::before {
            content: "";
            position: absolute;
            left: 1rem;
            top: 0;
            bottom: 0;
            width: 0.2rem;
            background-color: oklch(80% 0 0);
        }
        article {
            position: relative;
            margin-left: 3rem;
            margin-bottom: 3rem;
            padding: 1.5rem;
            border: 0.1rem solid oklch(90% 0 0);
            border-radius: 0.5rem;
            background-color: white;
            transition:
                    transform 0.2s ease,
                    box-shadow 0.2s ease;
            &:hover {
                transform: translateY(-0.2rem);
                box-shadow:
                        0 0.2rem 0.75rem rgb(0 0 0 / 15%);
            }
            h3 {
                margin-top: 0;
                margin-bottom: 0.5rem;
            }
            p {
                margin: 0;
            }
        }
    }
}
@media (max-width: 37.5rem) {
    main {
        margin-block: 9rem 0;

        section:last-child {
            &::before {
                left: 0.5rem;
            }
            article {
                margin-left: 2rem;
            }
        }
    }
}