.tx-stgag-teaser-and-quicklinks {
    --quicklink-item-width--default: 240px;
    --quicklink-item-height--default: 150px;
    --quicklink-item-height--with-header: 280px;
    --quicklink-item-title-max-lines: 2;
    margin-bottom: 2rem;

    .quicklink-item {
        border-radius: 5px;
        overflow: hidden;
        box-shadow: 0 0px 15px -3px #0000002a, 0 0px 6px -4px #0000001a;

        a {
            overflow: hidden;
            color: inherit;
        }

        img {
            transition: all .15s ease-out;
        }
    }

    .quicklink-item:hover {
        img {
            transform: scale(1.025);
        }

        span.icon.image-placeholder {
            transform: scale(1.05);
        }
    
        .quicklink-footer {
            color: var(--stgag-white);
            background-color: var(--stgag-green);
        
            .icon svg {
                color: var(--stgag-white);
            }
        }
    }

    .quicklink-header {
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 1 1 auto;
    }

    .quicklink-footer {
        display: flex;
        flex-direction: column;
        padding: 1.25rem; 
        height: 100%;
        font-weight: bold;
    
        .quicklink-footer-title {
            flex: 1 1 auto;
            height: calc(var(--quicklink-item-title-max-lines) * 1lh);
        }

        .quicklink-footer-title-content {
            max-height: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    
        .icon svg {
            margin-left: auto;
            display: block;
            color: var(--stgag-green);
            transform: rotate(-90deg);
        }


    }

    .quicklinks-block,
    .page-teaser-block {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(var(--quicklink-item-width--default), 1fr));
        grid-auto-rows: var(--quicklink-item-height--default);
        grid-gap: 1rem;  
    }

    .quicklinks-block.quicklinks-block--2-per-row,
    .page-teaser-block.page-teaser-block--2-per-row {
        @media screen and (min-width: 1024px) {
            grid-template-columns: repeat(2, minmax(var(--quicklink-item-width--default), 1fr));
        }
    }

    .quicklinks-block.quicklinks-block--3-per-row,
    .page-teaser-block.page-teaser-block--3-per-row {
        @media screen and (min-width: 1200px) {
            grid-template-columns: repeat(3, minmax(var(--quicklink-item-width--default), 1fr));
        }
    }

    .quicklinks-block.quicklinks-block--4-per-row,
    .page-teaser-block.page-teaser-block--4-per-row {
        @media screen and (min-width: 1440px) {
            grid-template-columns: repeat(4, minmax(var(--quicklink-item-width--default), 1fr));
        }
    }

    .quicklinks-block--image, 
    .quicklinks-block--icon, 
    .page-teaser-block--image,
    .page-teaser-block--icon {
        grid-auto-rows: var(--quicklink-item-height--with-header);

        a {
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            gap: 3px;
        }

        .quicklink-footer {
            flex-direction: row;
            align-items: flex-end;
            height: fit-content;
        }

        .quicklink-footer-title {
            display: flex;
            align-items: flex-end;
        }

        .icon.custom-arrow_down svg {
            height: 1lh;
        }

        .icon.image-placeholder {
            height: 60px;
            width: 60px;
            margin-top: 2rem;
            color: var(--stgag-lightgreen);
        }

        img:not(.icon) {
            object-fit: cover;
            height: 100%;
            width: 100%;
        }
    }
}