.profile-layout {
    display: flex;
    width: 100%;
    margin-top: 20px;
    gap: var(--base-gap);

    @media all and (max-width : $breakpoint-xl) {
        flex-direction: column-reverse;
    }

    >.start {
        width: 25%;
        min-width: 25%;

        @media all and (max-width : $breakpoint-xl) {
            width: 100%;
            min-width: unset;
        }
    }

    >.end {
        width: 75%;
        min-width: 75%;

        @media all and (max-width : $breakpoint-xl) {
            width: 100%;
            min-width: unset;
        }
    }
}