.header.header--internal {
    border-bottom: var(--o-dolphin-xs);

    .main-nav {
        .nav-list {
            &.nav-list--main {
                .nav-item {
                    .nav-item__a {
                        &.base-link--is-active {
                            --main-color: var(--hibiscus);
                            
                            font-weight: 600;
                            padding: var(--space-xs) var(--space-3xs);
                            border-bottom: 0.1em solid var(--hibiscus);
                            position: relative;

                            &::before,
                            &::after {
                                content: '';
                                background-image: linear-gradient(
                                    to top,
                                    var(--main-color) ,
                                    transparent 45%
                                );
                                width: 100%;
                                height: 100%;
                                position: absolute;
                                bottom: 0;
                                left: 0;
                                transition: opacity var(--tr-xs);
                            }

                            &::before { opacity: 0.35; }

                            &::after { opacity: 0; }

                            &:hover {
                                --main-color: var(--dolphin);

                                border-color: var(--main-color);

                                &::before { opacity: 0; }

                                &::after {  opacity: 1; }
                            }
                        }
                    }
                }
            }
        }
    }
}

@media (width >= 1281px) {
    .header.header--internal {
        .main-nav {
            align-items: stretch;
            padding: 0;

            .main-nav__logo,
            .nav-list--social {
                align-self: center;
            }

            .nav-list {
                &.nav-list--main {
                    height: auto;
                    flex-grow: 1;
                    justify-content: flex-start;
        
                    .nav-item {
                        align-self: stretch;
                        display: flex;

                        .nav-item__a {
                            align-self: stretch;
                            
                            &.base-link--is-active {
                                padding: 0 var(--space-3xs);
                            }
                        }
                    }
                }
            }
        }
    }
}
.internal-intro {

    display: grid;
    gap: var(--space-s);
    padding-block: var(--space-m);

    .internal-intro__title {
        color: var(--blue-haze);
    }

    .internal-intro__description {
        font-family: var(--regular-font);
        font-size: var(--fs-s);
        text-align: center;
        font-weight: 400;
        text-transform: none;
        line-height: var(--lh-m);
    }

    .internal-intro__decorator {
        --color: var(--amaranth);

        width: clamp(40ch, 10dvw + 7rem, 100%);
    }

}


@media (width >= 768px) {

    .internal-intro {
        .internal-intro__description {
            /* width: var(--max-w-2); */
            width: 50ch;
            margin: 0 auto;
        }
    }

}


@media (width >= 1281px) {
    .internal-intro {

        .internal-intro__title,
        .internal-intro__description {
            text-align: left;
        }

        .internal-intro__description {
            margin: 0;
        }

        .internal-intro__decorator {
            margin: 0;
        }

    }
}
.main.main--blog-content {

    padding-block: var(--space-s);
    display: grid;
    gap: var(--space-l);

    .entries {
        width: 100%;
        display: block;

        .blog-entry-item {
            min-width: 0;
            width: 100%;
        }
    }

    .blog-entry {
        min-height: clamp(22rem, 62dvw, 32rem);
        display: grid;
        gap: var(--space-s);
        overflow: hidden;

        .blog-entry__media,
        .blog-entry__content {
            min-width: 0;
        }

        .blog-entry__media {
            background-color: var(--woodsmoke);
            border-radius: var(--br-s);
            overflow: hidden;
        }

        .blog-entry__image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .blog-entry__content {
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: var(--space-xs);
        }

        .skill-chip-list {
            margin-top: 0;
        }

        .blog-entry__title {
            --n-lines: 5;

            color: var(--blue-haze);
            font-family: var(--title-font);
            font-size: var(--fs-m);
            font-weight: 400;
            line-height: var(--lh-s);
            width: calc(100% - var(--space-xs));

            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: var(--n-lines);
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .blog-entry__description {
            font-size: var(--fs-2xs);
            line-height: var(--lh-m);
        }

        .blog-entry__link {
            font-size: var(--fs-xs);
            flex-grow: 1;
            height: fit-content;
            align-self: self-start;
            display: grid;
            align-items: flex-end;
        }
    }

    .blog-entry__meta {
        color: var(--dolphin);
        line-height: var(--lh-s);
        font-size: var(--fs-2xs);
        padding-block: var(--space-3xs);
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-3xs);

        time,
        span {
            font-size: inherit;
            line-height: inherit;
        }
    }

    .collection-list--all {
        .collection-list__empty {
            color: var(--dolphin);
            font-size: var(--fs-xs);
            line-height: var(--lh-m);
            padding-block: var(--space-s);
        }

        .entries {
            --fill-prop: auto-fit;

            width: 100%;
            display: grid;
            grid-template-columns: repeat(
                var(--fill-prop),
                minmax(
                    calc(11dvw + 9rem),
                    1fr
                )
            );

            .blog-entry,
            .blog-entry-item--main .blog-entry {
                position: relative;
                height: 100%;
                min-height: 0;
                grid-template-columns: 1fr;
            }

            .blog-entry-item,
            .blog-entry-item--main,
            .blog-entry-item:not(.blog-entry-item--main) {
                grid-column: auto;
                grid-row: auto;
            }

            .blog-entry__media {
                width: 100%;
                aspect-ratio: 16 / 7;
            }

            .skill-chip-list {
                margin-top: 0;
            }

            .blog-entry__content {
                gap: var(--space-2xs);
            }

            .blog-entry__title {
                width: 100%;
            }

            .blog-entry__description {
                font-size: var(--fs-xs);
            }
        }
    }

    .collection-list--featured {
        .blog-entry {
            min-height: clamp(22rem, 62dvw, 32rem);
        }

        .blog-entry__description {
            font-size: var(--fs-xs);
        }
    }
}

@media (width >= 1025px) {
    .main.main--blog-content {
        .collection-list--featured {
            .blog-entry {
                height: 100%;
                min-height: 30rem;
                grid-template-columns: 45% 1fr;
            }
        }
    }
}


@media (width >= 1280px) {
    .main.main--blog-content {

        .collection-list--all {
            .entries {
                --fill-prop: auto-fill;
            }
        }
    }
}
.filter-list {

    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    justify-content: center;

    .filter-chip {
        width: fit-content;
        height: fit-content;
    }

}


@media (width >= 1281px) {
    .filter-list {
        justify-content: flex-start;

        .filter-chip {
            
        }

    }
}
.section.section--collection {

    display: grid;
    gap: var(--space-xs);
    
    .collection-header {
        width: 100%;
        margin: 0;
        display: flex;
        align-items: center;
        gap: var(--space-xs);

        .collection-header__title {
            color: var(--amaranth);
            font-size: var(--fs-m);
            font-weight: 400;
        }

        hr {
            --color: var(--amaranth);

            flex: 1;
            min-width: 0;
        }
    }

}
.base-card {
    background-image: linear-gradient(
        0deg, 
        transparent 0%, 
        var(--baltic-sea) 100%
    );
    margin: 0 3px;
    padding: var(--space-s);
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    border-radius: var(--br-m);
    box-shadow: var(--shadow-upper);

    &.base-card--reverted {
        background-image: linear-gradient(
            0deg, 
            var(--baltic-sea) 0%, 
            transparent 100%
        );
        box-shadow: var(--shadow-under);
    }

    .base-card__title {
        color: var(--blue-haze);
        font-size: var(--fs-s);
    }

    .base-card__subtitle,
    .base-card__description {
        font-size: var(--fs-xs);
    }

    .base-card__detail {
        font-size: var(--fs-2xs);
    }
}
.skill-chip-list {
    margin-top: var(--space-2xs);
    padding: 0 0.1em;
    gap: var(--space-2xs);

    &,
    & .skill-chip {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    & .skill-chip {
        color: var(--blue-haze);
        font-size: var(--fs-3xs);
        gap: var(--space-3xs);
        padding: calc(var(--space-3xs) / 2) calc(var(--space-3xs) * 1.5);
        border-radius: 50px;
        outline: 0.1em solid var(--blue-haze);

        &::before {
            background-image: var(--gradient-chip-bg);
        }
    }
}

@media (prefers-reduced-motion: no-preference) {
    .skill-chip-list {
        & .skill-chip {
            &:hover {
                background-image: var(--gradient-magenta);
                outline-color: var(--burnt-sienna);
            }
        }
    }
}