@use '../../../styles/tools/functions';
@use '../../../styles/settings/colours';

.Heading {
    width: 100%;

    &--Column {
        @media all and (min-width: functions.em(768)) {
            width: 33.3333%;
        }
    }
}

.Author {
    display: flex;
    align-items: center;
    gap: functions.pxRem(24);

    @media all and (min-width: functions.em(768)) {
        align-items: flex-start;
        flex-direction: column;
    }
}

.AuthorImage {
    width: functions.pxRem(84);
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 50%;
}

.Share {
    display: flex;
    flex-wrap: wrap;
    gap: functions.pxRem(20);
}

.ShareLink {
    width: functions.pxRem(43);
    height: functions.pxRem(43);
    margin-top: functions.pxRem(24);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;

    &--Green {
        background-color: colours.$green;
        fill: #FFF;
        transition: background-color 0.3s;

        &:hover {
            background-color: colours.$green-dark;
        }
    }

    &--White {
        background-color: #FFF;
        fill: colours.$green;
    }

    svg {
        padding: functions.pxRem(4);
    }
}

.Content {
    width: 100%;

    &--Column {
        @media all and (min-width: functions.em(768)) {
            width: 66.6666%;
            margin-left: auto;
        }
    }

    &--SizeNormal {
        .Text {
            max-width: functions.pxRem(980);
        }
    }
}

.SubHeading {
    @media all and (min-width: functions.em(768)) {
        margin-bottom: 1em;
    }
}

.Text {
    h1, h2, h3, h4, h5, h6 {
        margin-top: 3em;

        &:first-child {
            margin-top: 0;
        }
    }

    ul {
        list-style-type: none;
        padding-left: 0;

        li {
            position: relative;
            padding-left: 1.1em;

            &:before {
                content: '';
                width: 0.6em;
                height: 0.6em;
                border-radius: 50%;
                border: functions.pxRem(1) solid;
                position: absolute;
                top: 0.3em;
                left: 0;
            }
        }
    }
}

.Button {
    margin-top: functions.pxRem(40);

    @media all and (min-width: functions.em(768)) {
        margin-top: functions.pxRem(50);
    }
}