/*
 * Card group with 2 columns (setting "columns" = 2 in the content element), layout after the designer's draft:
 * image with rounded corners on top, coloured body below (colour by "link class" of the card, see main.css),
 * arrow button on the image. Mobile: 1 column, from 768px on: 2 columns.
 */
.card-group-element-columns-2 {
    --cardgroup-columns: 1;
    --cardgroup-gap: 2rem;
}

@media (min-width: 768px) {
    .card-group-element-columns-2 {
        --cardgroup-columns: 2;
        --cardgroup-gap: 3.5rem;
    }
}

.card-group-element-columns-2 .card-group-element-item > a {
    display: block;
    height: 100%;
    color: inherit;
}

/* selector specific enough to beat ".container .frame-background-*" of bootstrap_package */
.card-group-element-columns-2 .card-group-element-item .card {
    height: 100%;
    /* the frame-background-* class (colour of the card) also adds the horizontal padding of content frames */
    padding: 0;
    overflow: hidden;
}

.card-group-element-columns-2 .card-img-top img {
    display: block;
    aspect-ratio: 369 / 209;
    object-fit: cover;
}

.card-group-element-columns-2 .card-body {
    padding: 2.25rem 1.875rem 2.5rem;
}

.card-group-element-columns-2 .card-title {
    margin-bottom: 1.25rem;
    padding-right: 0;
    font-size: 1.25rem;
    font-weight: bold;
}

.card-group-element-columns-2 .card-body p:last-child {
    margin-bottom: 0;
}

.card-group-element-columns-2 .card-group-element-item > a:hover .card-title,
.card-group-element-columns-2 .card-group-element-item > a:focus-visible .card-title {
    text-decoration: underline;
}