.node--type-blog.node--view-mode-full {
    padding-bottom: 54px;

    .node__content {
        .blog-top {
            .field--name-field-picture {
                height: max(293px, 20vw);
                width: 100%;

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
        }

        .blog-content {
            margin: 0 calc(0.5 * var(--grid-padding));
            background: white;
            gap: grid;
            margin-top: -162px;

            >* {
                padding: 0 calc(0.5 * var(--grid-padding));
            }

            .next-prev {
                margin-top: 32px;
                display: flex;
                flex-wrap: wrap;

                .field--name-field-prev-post {
                    margin-right: auto;

                    a {
                        &::before {
                            content: '';
                            width: 10px;
                            height: 10px;
                            background-image: url("../../images/icons/chevron-right.svg");
                            background-size: 6px;
                            background-repeat: no-repeat;
                            background-position: center;
                            transform: rotate(180deg);
                            margin-right: 12px;
                        }
                    }
                }

                .field--name-field-next-post {
                    margin-left: auto;

                    a {
                        &::after {
                            margin-left: 12px;
                            content: '';
                            width: 10px;
                            height: 10px;
                            background-image: url("../../images/icons/chevron-right.svg");
                            background-size: 6px;
                            background-repeat: no-repeat;
                            background-position: center;
                        }
                    }
                }
            }

            .blog-columns-top {
                display: flex;
                width: 100%;

                .top-left {
                    flex: 1;

                    >* {
                        padding-left: 0;
                    }
                }

                .top-right {
                    margin-left: auto;
                    margin-top: 32px;

                    a {
                        display: flex;
                        gap: 12px;
                        align-items: center;
                        text-decoration: none;

                        span {
                            display: none;
                        }

                        &::before {
                            content: "Udostępnij post:";
                            font-size: var(--font-size-14);
                            color: var(--color-gray-5);
                            display: none;

                            @media (max-width: 768px) {
                                display: none;
                            }
                        }

                        &::after {
                            content: "";
                            width: 17px;
                            height: 17px;
                            background-image: url("../../images/icons/share.svg");
                            background-position: center;
                            background-size: 16px;
                            background-repeat: no-repeat;
                        }
                    }
                }
            }


            .field--name-field-category {
                margin-bottom: 18px;
                display: flex;
                align-items: center;
                gap: 10px;

                .field__item {
                    padding: 6px 14px;
                    color: white;
                    background-color: var(--color-blue-2);
                    font-weight: var(--font-medium);
                    font-size: var(--font-size-16);
                }
            }

            .node-title {
                box-sizing: content-box !important;
                font-size: var(--font-size-32);
                color: var(--color-blue-2);
                margin-bottom: 14px;
                margin-top: 5px;
                max-width: min(574px);
            }


            .blog-columns {
                margin-top: 30px;
                display: grid;
                grid-gap: 0 76px;
                grid-template-columns: 1fr 310px;

                .left {
                    .field--name-field-paragraphs {
                        display: grid;
                        grid-gap: 24px;
                        padding-bottom: 54px;
                        border-bottom: 1px solid var(--color-border-3);

                        .paragraph--type--blog-text {

                            .text-formatted {

                                p,
                                li {
                                    font-size: var(--font-size-18);
                                    line-height: 1.5;

                                    strong {
                                        font-weight: var(--font-semibold);
                                    }
                                }

                                ol,
                                ul {
                                    max-width: max(676px, 70%);

                                    li {
                                        color: black;
                                        font-weight: var(--font-light);

                                        strong {
                                            font-weight: var(--font-bold);

                                        }

                                        &::after {
                                            top: 3px;
                                            box-shadow: none;
                                        }
                                    }
                                }

                                &:not(:has(h3:last-child)) h3:first-child,
                                &:not(:has(.h3:last-child)) .h3:first-child {
                                    color: black;
                                    font-weight: var(--font-medium);
                                }
                            }

                            .media--type-youtube-vimeo {
                                .field__item {
                                    aspect-ratio: 16/9;

                                    iframe {
                                        width: 100%;
                                        height: 100%;
                                    }
                                }
                            }

                            .media--type-pictures {
                                display: grid;
                                width: 100%;
                                aspect-ratio: 841/254;
                                position: relative;

                                *:not(.contextual *) {
                                    display: grid;
                                }

                                img {
                                    position: absolute;
                                    width: 100%;
                                    height: 100%;
                                    object-fit: cover;
                                }

                                +p {
                                    margin-top: 5px;
                                    color: var(--color-gray-4) !important;
                                    font-size: var(--font-size-13) !important;
                                }
                            }
                        }
                    }
                }



                .text-formatted {

                    h1, .h1,
                    h2, .h2,
                    h3, .h3,
                    h4, .h4,
                    h5, .h5,
                    h6, .h6 {
                        font-size: var(--font-size-24);
                        font-weight: var(--font-semibold);
                    }
                }

                .view-toc-blog {
                    border-left: 1px solid var(--color-border-3);
                    padding: 16px 0 0 32px;
                    position: sticky;
                    left: 0;
                    top: calc(150px + var(--drupal-displace-offset-top));
                    font-size: var(--font-size-20);
                    font-weight: var(--font-semibold);



                    >.views-row {
                        margin-top: 16px;
                        display: flex;
                        align-items: center;
                        gap: 16px;

                        &::before {
                            content: '';
                            display: block;
                            width: 6px;
                            min-width: 6px;
                            height: 6px;
                            min-height: 6px;
                            background: var(--color-blue-2);
                            border-radius: 100%;
                            -webkit-box-shadow: 0px 0px 0px 3px rgba(36, 55, 130, 0.2);
                            -moz-box-shadow: 0px 0px 0px 3px rgba(36, 55, 130, 0.2);
                            box-shadow: 0px 0px 0px 3px rgba(36, 55, 130, 0.2);
                        }

                        &:nth-of-type(1) {
                            margin-top: 24px;
                        }

                        a {
                            font-size: var(--font-size-14);
                            font-weight: var(--font-light);
                            transition: all ease 0.3s;
                            color: var(--color-gray-4);
                            text-decoration: none;
                            position: relative;

                            .normal {
                                width: 100%;
                                height: 100%;
                                position: absolute;
                                top: 0;
                                left: 0;
                                opacity: 1;
                            }

                            .bold {
                                opacity: 0;
                                font-weight: var(--font-bold);
                            }

                            &.active {
                                .normal {
                                    opacity: 0;
                                }

                                .bold {
                                    opacity: 1;
                                }
                            }


                            &:hover {
                                color: var(--color-blue-2);
                            }
                        }
                    }

                }
            }
        }
    }
}

.view-tag-list {
    padding: 24px 0;
    font-size: var(--font-size-18);
    font-weight: var(--font-semibold);
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;

    .views-row {
        a {
          padding: 7px 14px;
          color: white;
          font-size: var(--font-size-14);
          background-color: var(--color-gray-4);
          border-radius: 100vw;
          font-weight: var(--font-light);
          text-decoration: none;
        }
        
    }
}



@media(max-width: 991px) {
    .node--type-blog.node--view-mode-full {

        .node__content {
            .blog-top {
                .field--name-field-picture {
                    height: max(102px, 25vw);
                }
            }

            .blog-content {
                margin-top: 0;

                .blog-columns {
                    grid-template-columns: 1fr;

                    .left+* {
                        display: none;
                    }

                    .left {
                        .field--name-field-paragraphs {
                            .paragraph--type--blog-text {
                                .text-formatted {
                                    h3 {
                                        font-size: var(--font-size-20);
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}


@media(max-width: 768px) {
    .node--type-blog.node--view-mode-full {
        .node__content {
            .blog-content {
                .node-title {
                    font-size: var(--font-size-24);
                }

                .blog-columns {
                    .left {
                        .field--name-field-paragraphs {
                            .paragraph--type--blog-text {
                                .text-formatted {

                                    p,
                                    li {
                                        font-size: var(--font-size-16);
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}