.highlightbox-container {
    container-name: highlightbox;
    container-type: inline-size;

    .highlightbox {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas: 
        "image"
        "title"
        "list"
        "price";
        gap: calc(var(--unit) * 2);
        padding: calc(var(--unit) * 2);
        background-color: rgba(var(--text-color-rgba), 0.05);

        a {
            font-size: calc(var(--fontsize) * 1.75);
            font-weight: 300;
            margin: 0;
            grid-area: title;
        }

        img {
            grid-area: image;
        }
        
        ul {
            list-style: circle;
            list-style-position: outside;
            margin-left: 24px;
            grid-area: list;
        }
    
        .highlightbox-price {
            font-size: calc(var(--fontsize) * 1.5);
            font-weight: 400;
            margin: 0 !important;
            grid-area: list;
        }
    
        .highlightbox-exclude {
            font-size: calc(var(--fontsize) - 4px);
            opacity: .5;
            font-style: italic;
            margin: 0 !important;
            line-height: 110%;
        }
    }

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

        ul {
            align-self: end;
        }
    }

    @container highlightbox (min-width: 800px) {
        .highlightbox {
            grid-template-columns: minmax(33%, 320px) auto;
            grid-template-rows: 1fr auto 1fr;
            grid-template-areas:
                "image title"
                "image list"
                "image price";
        }
                
        a {
            align-self: end;
        }
        
    }
}

:is(.dark) {
    .highlightbox {
        /* border: 1px solid rgba(var(--text-color-rgba), 0.2); */
        box-shadow: none;
    }
}