.casesSection {
        /*min-height: auto;*/
    }

    .casesContainer {
        container-name: caseContainer;
        /* Ge containern ett namn att referera till */
        container-type: inline-size;
        /* Vi vill fråga på inline-storleken (bredden) */

        --clipPathSliceLevel: 35px;
        --clipPathSliceLevel: 0px;
        
        --gapBetweenCases: 22px;
        --gapBetweenCaseImageAndContent: 1rem;
        --caseMinHeight: 260px;
        --caseMaxHeight: 450px;
        --sectionHeaderColor: #4c4c4c;
        --caseHeaderColor: #222;
        --paddingBlockWithinCaseContent: 2rem;
        --paddingRightWithinCaseContent: 2rem;
        --fontSizeCaseContentHeader: 2.8rem;
        --fontSizeCaseContentParagraph: 1.32rem;
        --lineHeightCaseContent: calc(var(--fontSizeCaseContentParagraph) + 6px);
        --thumbnailMaxHeight: 55px;
        --thumbnailMaxWidth: 130px;
        --caseContainerBottomMargin: 4rem;

        --caseImageMinHeight: 200px;
        --caseImageMaxHeight: 200px;

        margin-bottom: var(--caseContainerBottomMargin);
    }

    .casesContainerHeader {
        display: flex;
        justify-content: center;

        h2 {
            --headerMargin: 4.5rem;
            font-size: 40px !important;
            color: var(--sectionHeaderColor);
            font-family: 'bebas_neueregular';
            text-transform: uppercase;
            margin-right: 12px;
            margin-block: var(--headerMargin);
            margin-bottom: calc(var(--headerMargin) - 9px);
        }

    }

    .casesGrid {
        gap: var(--gapBetweenCases);
        /*padding: 1rem;*/
        /* outline: 2px solid blue; Testa gärna med en ram för att se wrapperns storlek */
        /*display: grid;
        grid-template-columns: repeat(3, 1fr);*/
        display: flex;

    }

    .case {
        background-color: #fff;
        /*border: 1px solid #ccc;*/
        display: flex;
        flex-direction: column;
        /*grid-template-columns: 40% 60%;*/
        /*grid-template-columns: 1fr;*/
        gap: var(--gapBetweenCaseImageAndContent);
        width: 100%;
    }

    .caseImage {
        /*clip-path: polygon(0% 0%, 100% 0%, calc(100% - var(--clipPathSliceLevel)) 100%, 0% 100%);*/
        background-size: cover;
        min-height: var(--caseImageMinHeight);
        max-height: var(--caseImageMaxHeight);
    }

    .caseContent {
        padding-block: var(--paddingBlockWithinCaseContent);
        padding-right: var(--paddingRightWithinCaseContent);
        padding-left: var(--paddingRightWithinCaseContent);
        font-family: 'Open Sans';
        min-height: var(--caseMinHeight);
        max-height: var(--caseMaxHeight);
        max-width: calc(100% - var(--gapBetweenCaseImageAndContent));
        height: 100%;
        display: flex;
        flex-direction: column;

        a {
            font-weight: bold;
        }

        p {
            font-size: var(--fontSizeCaseContentParagraph);
            line-height: var(--lineHeightCaseContent) !important;
            margin-block: 1rem;
            text-wrap: pretty !important;
        }


        h2 {
            color: var(--caseHeaderColor);
            font-size: var(--fontSizeCaseContentHeader);
            font-family: 'bebas_neueregular';
            text-transform: uppercase;
            margin-block: 0 !important;
            text-wrap: balance !important;
        }

        .caseTextContent {
            height: 100%;

            .caseTextReadMoreSection {
                display: flex;
                justify-content: left;
            }

            .caseTextReadMoreSection a {}

        }

        .caseThumbnail {
            display: flex;
            justify-content: right;
            padding-bottom: 1rem;

            img {
                max-width: var(--thumbnailMaxWidth);
                max-height: var(--thumbnailMaxHeight);
            }

        }
    }

    .casesContainerReadMore {
        display: flex;
        justify-content: center;
        margin-block: 3rem;

        .casesReadMoreButton {
            padding-inline: 5rem !important;
            background-color: #fff;
            color: #555;
            border: solid 2px #dfdfdf !important;
            margin-top: 3rem !important;
            margin-bottom: 0 !important;
            border-radius: 30px;
        }

        .casesReadMoreButton:hover {
            background-color: #666 !important;
            color: #fff !important;
        }

    }


    @container caseContainer (width < 768px) {
        .casesGrid {
            /*grid-template-columns: 1fr;*/
            padding: 0;
            flex-direction: column;
        }

        .casesContainerHeader {
            justify-content: center;
        }

        .caseTextContent h2{
            font-size: 3.3rem;
        }
    }



    @container caseContainer (width < 550px) {
/*        .caseImage {
            clip-path: none;
            min-height: 250px;
        }

        .caseContent {
            padding-left: 2rem;
        }

        .casesGrid {
            gap: 3rem;
        }
*/

        .case {
            /*grid-template-columns: 1fr;*/
            /*grid-template-columns: 30% 70%;*/
        }
    }