.weblogPost {
    display: flex;
    flex-direction: column;
    gap: var(--gridGutter);
}

.weblogPost__backLink {
    font-family: var(--proximaMedium);
    font-size: var(--h4Size);
    color: var(--baseLight900);
}

.weblogPost .postListPost__intro,
.weblogPost__text {
    margin-block-end: 2rem;
}

.weblogPost__titleSection {
    text-align: center;
}

.weblogPost .tagsList__list {
    justify-content: center;
}

.weblogPost .postMetaInfo {
    justify-content: center;
    text-align: left;
}

.weblogPost__title {
    margin-block: 2rem;
    hyphens: auto;
}

.weblogPost .postListPost__intro {
    margin-inline: auto;
    font-size: var(--introSize);
}

.weblogPost__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 2/1;
    border-radius: var(--borderRadiusSmall);
}

.weblogPost__imageSection,
.weblogPost__text {
    margin-inline: auto;
}

.weblogPost__contentSection {
    position: relative;
}

/**
 * weblog attachments
 */

.weblogPost__attachments {
    margin-block: var(--marginSmall);
}

.weblogPost__attachmentList {
    margin: 0;
    padding: 0;
    list-style: none;
}

.weblogPost__attachmentLink {
    position: relative;
    display: flex;
    align-items: center;
    padding: .75rem 2.5rem .75rem 0;
    border-bottom: 1px solid var(--baseLight500);
    font-family: var(--proximaSemibold);
    font-size: var(--h4Size);
    color: var(--baseLight900);
    text-decoration: none;
}

.weblogPost__attachmentItem:last-child .weblogPost__attachmentLink {
    border-bottom: none;
}

.weblogPost__attachmentLink::after {
    position: absolute;
    top: 50%;
    right: .5rem;
    margin-top: -15px;
    content: '\e812';
    font-family: var(--iconFont), sans-serif;
    transition: transform .3s ease-out;
}

.weblogPost__attachmentLink:hover {
    color: var(--secondaryColor500);
}

.weblogPost__attachmentLink .icon-lock {
    margin-left: auto;
    color: var(--primaryColor500);
}

.weblogPost__attachmentIcon {
    margin-right: .5rem;
    font-size: 1.9rem;
}

.weblogPost__attachmentLink:hover {
    text-decoration: none;
    background-color: var(--primaryColor200);
}

@media (min-width: 768px) {
    .weblogPost .postListPost__intro,
    .weblogPost .weblogPost__imageSection,
    .weblogPost .weblogPost__text {
        max-width: 60%;
    }

    .weblogPost__share:has(.ShareButtons--sizeSmall) {
        --socialMediaButtonSize: 26px;
    }

    .weblogPost__share:has(.ShareButtons--sizeNormal) {
        --socialMediaButtonSize: 32px;
    }

    .weblogPost__share:has(.ShareButtons--sizeLarge) {
        --socialMediaButtonSize: 42px;
    }

    .weblogPost__share {
        position: absolute;
        left: calc(20% - var(--socialMediaButtonSize) - 1.5rem);
        top: .4rem;
        display: flex;
        flex: 0 0 var(--socialMediaButtonSize);
        max-width: var(--socialMediaButtonSize);
    }

    .weblogPost__share .ShareButtons {
        flex-direction: column;
    }
}