.widget.discoverresults, .widget.repositoriesresults {
    container-type: inline-size;

    @container (max-width: 350px) {           
        .cite {
            .wdr-authors {
                display: none;
            }
        }
    }
}

@container (min-width: 700px) {
    .card h2 {
        font-size: 2em;
    }
}

@container sidebar (min-width: 700px) {
    .card {
        font-size: 2em;
    }
}

@container (min-width: 60ch) {
    .container:nth-child(odd) > article {
        border: 1px solid grey;
    }
}

@container size(min-width: 60ch) {
    .article--post header {
        grid-template-areas:
            "avatar name"
            "avatar headline";
        align-items: start;
    }
  
    .article--post {
        grid-template-areas: "header header" ". stats" ". content";
        grid-auto-columns: 5rem 1fr;
        column-gap: 1rem;
    }
  
    .article--post__title {
        font-size: 1.75rem;
    }
}

.card h2 {
    container-type: inline-size;
    margin: 0;
    padding: 10px;

    @container (min-width: 500px) {
        .card-content {
            grid-template-columns: 1fr 2fr;
            grid-template-rows: auto 1fr;
            align-items: start;
            column-gap: 20px;
        }
 
        .card-content h2 {
            padding: 0;
            margin: 0.5em 0 0 0;
        } 
    }
}

@container (width >= 500px) and (height >= 500px) {
    .card-content h2 {
        padding: 0;
        margin: 0.5em 0 0 0;
    } 
}

@container (width > 760px) not (height > 670px) {
    .card-content h2 {
        padding: 0;
        margin: 0.5em 0 0 0;
    } 
}

@container not (height <= 1080px) {
    .card-content h2 {
        padding: 0;
        margin: 0.5em 0 0 0;
    } 
}

@container (width < 500px) or (height < 500px) {
    .card-content h2 {
        padding: 0;
        margin: 0.5em 0 0 0;
    } 
}

@container (width < 500px) or (height < 500px) and (inline-size >= 0px) {
    .card-content p {
        padding: 0;

        h2 {
            margin: 0.5em 0 0 0;
        }
    } 
}

@container my-page-layout (width < 500px) or (height < 500px) and (block-size > 12em) {
    .card-content p {
        padding: 0;

        h2 {
            margin: 0.5em 0 0 0;
        }
    } 
}

@container (width < 500px) or (height < 500px) and (aspect-ratio: 3/2) {
    .card-content p {
        padding: 0;

        h2 {
            margin: 0.5em 0 0 0;
        }
    } 
}

@container (width < 500px) or (height < 500px) and (orientation: portrait) {
    .card-content p {
        padding: 0;

        h2 {
            margin: 0.5em 0 0 0;
        }
    } 
}

@container card (inline-size > 30em) {
    .card-content p {
        padding: 0;

        h2 {
            margin: 0.5em 0 0 0;
        }
    }
    
    @container style(--responsive: true) {
        .card-content {
            grid-template-columns: 1fr 2fr;
            grid-template-rows: auto 1fr;
            align-items: start;
            column-gap: 20px;
        }
 
        .card-content h2 {
            padding: 0;
            margin: 0.5em 0 0 0;
        }
    }
}

@container ( width < 500px ) or (height<500px) and (orientation: portrait) {
    .card-content p {
        padding: 0;

        h2 {
            margin: 0.5em 0 0 0;
        }
    } 
}

@container my-page-layout ( width< 500px) or ( height<500px) and ( block-size>12em ) {
    .card-content p {
        padding: 0;

        h2 {
            margin: 0.5em 0 0 0;
        }
    } 
}

.wrapper {
    container-name: wrapper;
    container-type: size;
}
  
.my_mixin(@height) {
    @container wrapper (height < @height) {
        a {
            max-height: @height;
        }
    }
}
  
.my_mixin(100);
.my_mixin(200);
.my_mixin(300);

@media only screen and (min-width: 768px) {
    @container (min-width: 500px) {
        .primary-content {
            font-size: 1rem;
        }
    }
}

@media only screen and (min-width: 768px) {
    .media-1 {
        font-size: 1.5rem;
    }

    @container (min-width: 500px) {
        .primary-content {
            font-size: 1rem;
        }
    }
}

@media only screen and (min-width: 768px) {
    .media-1 {
        font-size: 1.5rem;
    }
    
    @container (min-width: 500px) {
        .primary-content {
            font-size: 1rem;
        }
    }

    .media-2 {
        font-size: 2rem;
    }
}

@media only screen and (min-width: 768px) {
    .media-1 {
        font-size: 1.5rem;
    }
    
    @container (min-width: 500px) {
        .primary-content {
            font-size: 1rem;
        }

        @media (hover: hover) {
            .foo {
                font-size: 1.75rem;
            }
        }
    }

    .media-2 {
        font-size: 2rem;
    }
}

@media only screen and (min-width: 768px) {
    .media-1 {
        font-size: 1.5rem;
    }
    
    @container (min-width: 500px) {
        .primary-content {
            font-size: 1rem;
        }

        @media (hover: hover) {
            .foo {
                font-size: 1.75rem;

                @media not all and (hover: hover) {
                    color: limegreen;
                }
            }

            .media-3 {
                padding: 0.5rem;
            }
        }
    }

    .media-2 {
        font-size: 2rem;
    }
}

@container (min-width: 768px) {
    @media only screen and (min-width: 768px) {
        .foo {
            color: aliceblue;
        }
    }

    .container-1 {
        color: purple;
    }
}

#sticky {
    position: sticky;
    container-type: scroll-state;
}

@container scroll-state(stuck: top) {
    #sticky-child {
      font-size: 75%;
    }
}

@container scroll-state(snapped: x) {
    #sticky-child {
      font-size: 75%;
    }
}

@container scroll-state(scrollable: top) {
    #sticky-child {
      font-size: 75%;
    }
}


