:root {
    --swiper-pagination-bottom: 0;
    --swiper-theme-color: #0F4C81;
    --card-main-height: 50%;
    --card-main-width: 300px;
}

.modular-card {
    text-align: center;
}
.modular-card .container {
    padding: 1rem 3rem;
}
.modular-card .card-content {
    background: rgba(255, 255, 255, 0.8);
    border-radius: 2rem;
    position: relative;
    padding: 1rem 0;
}

.modular-card .carousel-inner {
    padding: 2rem;
}

.modular-card .card {
    overflow-y: hidden;
    margin: 20px;
    border-radius: 40px;
    width: var(--card-main-width);
}
.modular-card .card-body {
    height: 100%;
}

.modular-card .card-main {
    padding: 10px;
    height: var(--card-main-height);
}

.modular-card .card-main img {
    height: 100%; /* Make image height fill the container */
    width: 100%; /* Make image width fill the container */
    object-fit: contain; /* Cover the container without stretching */
    display: block; /* Remove default image inline behavior */
}
.modular-card .card-main h3 {
    font-size: 90px;
    margin: unset;
    width: auto;
}
.modular-card .card-main h3 span {
    font-size: 60px;
}

.modular-card .card-info h4 {
    margin-top: .8rem;
}
.modular-card .card-info p {
    margin: 1.2rem 0;
}

.modular-card .card.card-border-none{
    border: unset;
}

.modular-card .card.card-border-shadow{
    border: unset;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.modular-card h3, .modular-card h4, .modular-card h5 , .modular-card h6, .modular-card p, .modular-card a  {
    color: inherit;
}
.card-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    z-index: -1;
}

.card-body:hover .card-backdrop,
.card-main:hover .card-backdrop,
.card-info:hover .card-backdrop
{
    opacity: 1;
}

@media (max-width: 840px) {
    .modular-card .container {
        padding: unset;
    }
    .modular-card .card {
        width: 100%!important;
        /*height: 300px;*/
        margin-bottom: 20px;
    }
    .modular-card .card-main {
        /*height: calc(var(--card-main-height) / 1.5);*/
        padding: unset;
    }
    .modular-card .card-main h3 {
        font-size: 60px;
    }
    .modular-card .card-main h3 span {
        font-size: 45px;
    }
    .modular-card .card-info p {
        margin: 8px 0;
    }
}