.featured-item {
    container-name: featured-item;
    container-type: inline-size;

    .featured-item-inner {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas:
            "image"
            "title"
            "list"
            "cta";
        gap: calc(var(--unit) * 2);
        padding: calc(var(--unit) * 2);

        h3 {
            font-size: calc(var(--fontsize) * 1.5);
            font-weight: 200;
            margin: 0;
            grid-area: title;
        }

        picture {
            grid-area: image;
            height: fit-content;
        }

        @media (hover) {
            picture:hover img {
                scale: 105%;
                transition: scale .5s var(--easier);
            }
        }

        img {
            width: 100%;
            height: auto;
            transition: scale .5s var(--easier);
        }

        p {
            grid-area: list;
        }

        .more-button {
            grid-area: cta;
            font-weight: 400;
        }

        .more-button-arrow {
            display: inline-block;
            transform: translateX(calc(var(--unit) * -2));
            opacity: 0;
            transition: transform .45s var(--easier), opacity .45s var(--easier);
        }

        .more-button-name {
            display: inline-block;
            transform: translateX(calc(var(--unit) * -2));
            transition: transform .45s var(--easier);
        }

        @media (hover) {
            .more-button:hover .more-button-arrow {
                transform: translateX(calc(var(--unit) * 2));
                opacity: 1;
            }

            .more-button:hover .more-button-name {
                transform: translateX(calc(var(--unit) * 2));
                transition: transform .45s var(--easier);
            }
        }
    }

    @container featured-item (min-width: 400px) {
        .featured-item-inner {
            grid-template-columns: minmax(33%, 240px) auto;
            grid-template-rows: repeat(3, auto);
            grid-template-areas:
                "title title"
                "image list"
                "image cta";
            column-gap: calc(var(--unit) * 3);
            row-gap: calc(var(--unit) * 2);
        }

        p {
            align-self: end;
        }
    }

    @container featured-item (min-width: 800px) {
        .featured-item-inner {
            grid-template-columns: minmax(33%, 388px) auto;
            grid-template-rows: 1fr auto 1fr;
            grid-template-areas:
                "image title"
                "image list"
                "image cta";
        }

        h3 {
            align-self: end;
        }

    }
}