/* ==== Card ==== */
.card {
    border-radius    : var(--border-radius);
    background-color : #ffffff;
    border           : 1px solid #dedede;
    padding          : 2rem;
    
    > .icon {
        font-size : 40px;
    }
}

@media all and (max-width : 567px) {
    .card {
        padding : 1rem;
    }
}

/* ==== Cardstack ==== */
.cardstack {
    display         : flex;
    flex-direction  : row;
    flex-wrap       : wrap;
    justify-content : space-around;
    align-items     : stretch;
    align-content   : stretch;
    gap             : 0 1rem;
    
    > div {
        padding : 1.25rem;
    }
    
    h4 {
        padding : 0.25rem 0;
    }
}

/* Placeholder image */
.img-placeholder {
    display          : flex;
    align-items      : center;
    justify-content  : center;
    background-color : #eeeeee;
    color            : #666666;
    height           : 400px;
    border-radius    : var(--border-radius);
    user-select      : none;
    pointer-events   : none;
    border           : 1px solid #e8e8e8;
    
    &::after {
        content   : "Platzhalter Bild";
        font-size : 24px;
        padding   : 1rem;
    }
}

/* ==== Info Box ==== */
div.infobox {
    background-color : var(--bg-color-default);
    padding          : 2rem;
    
    h1 {
        text-transform   : uppercase;
        margin-block-end : 2rem;
    }
    
    h4 {
        margin-block-end : 1rem;
    }
    
    .button {
        font-weight : 100;
    }
}