.paragraph--type--from-library:has(.swiper .node--type-blog) {
    padding: calc(var(--section-padding)*1) var(--grid-padding) calc(var(--section-padding) * 1.7) var(--grid-padding);

    .paragraph--type--embed-view {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 32px;
    }

    .field--name-field-text {
        grid-column: 1;

        h1, .h1,
        h2, .h2,
        h3, .h3 {
            font-size: var(--font-size-32);
        }
    }

    .links {
        display: flex;
        gap: 4px;
        justify-content: flex-end;
        grid-column: 2;

        .field--name-field-links {
            margin-right: 12px;
        }
    }

    .field--name-field-view {
        grid-column: 1/3;
    }
}


.node--type-blog {
    .node__content {
        display: flex;
        flex-direction: column;

        .pic-tags {
            position: relative;
            margin-bottom: 24px;

            .field--name-field-category {
                position: absolute;
                top: 0;
                left: 18px;
            }

            .field--name-field-picture {
                aspect-ratio: 410/220;

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

        }

        .field--name-field-date-added,
        .field--name-title,
        .field--name-field-read-time {
            padding-left: 24px;
            padding-right: 24px;
        }

        .field--name-field-read-time,
        .field--name-field-date-added {
            color: #495367;
            font-size: var(--font-size-14);
            margin-bottom: 8px;
        }

        .field--name-title {

            h1, .h1,
            h2, .h2,
            h3, .h3 {
                a {
                    display: flex;
                    font-weight: var(--font-medium);
                    font-size: var(--font-size-20);
                    color: var(--color-gray-10);
                    margin-bottom: 14px;
                    text-decoration: none;

                    &:hover {
                        text-decoration: underline;
                        opacity: 0.8;
                    }
                }
            }
        }
    }
}

.field--name-field-category {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;

    .field__item {
        a {
            background-color: var(--color-blue-2);
            transition: background-color ease 0.4s;
            color: var(--color-gray-0);
            font-size: var(--font-size-16);
            font-weight: var(--font-medium);
            padding: 6px 14px;
            text-decoration: none;
            display: flex;


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

.node--view-mode-top-blog-entry .view-tag-list {
    .views-row {
        a {
            background-color: var(--color-blue-2);
            transition: background-color ease 0.4s;
            color: var(--color-gray-0);
            font-size: var(--font-size-16);
            font-weight: var(--font-medium);
            padding: 6px 14px;
            text-decoration: none;
            display: flex;
            border-radius: 0;


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

@media(max-width: 768px) {
    .paragraph--type--from-library:has(.swiper .node--type-blog) {
        .paragraph--type--embed-view {
            display: flex;
            gap: 24px;
            flex-direction: column;
        }

        .field--name-field-text {
            order: 1;

            h1, .h1,
            h2, .h2,
            h3, .h3 {
                font-size: var(--font-size-24);
            }
        }

        .links {
            order: 3;

            @media(max-width: 550px) {
                flex-direction: row-reverse;
                margin-left: 0;
                width: 100%;
                align-items: flex-end;
                margin-right: auto;
                justify-content: flex-end;
                gap: 12px;

                .field--name-field-links {
                    flex-grow: 1;

                    .field__item {
                        width: 100%;
                    }

                    a {
                        width: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }
                }

                .swiper-button-prev {
                    flex-grow: 0.5;
                    order: 1;
                    margin-right: -8px;
                }

                .swiper-button-next {
                    flex-grow: 0.5;
                }
            }
        }


        .field--name-field-view {
            order: 2;
        }
    }


    .node--type-blog {
        .node__content {

            .field--name-field-date-added,
            .field--name-title,
            .field--name-field-read-time {
                padding-left: 0;
                padding-right: 0;
            }

        }
    }

}