/* ==========================================================================
   Motivarto Banner Section – Homepage
   Simple banner with desktop and mobile images
   ========================================================================== */

.mp-banner {
    position: relative;
    width: 100%;
    display: block;
    overflow: hidden;
}

.mp-banner__link {
    display: block;
    width: 100%;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.mp-banner__link:hover {
    opacity: 0.9;
}

.mp-banner__picture {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}

.mp-banner__image {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
}

/* Desktop */
@media (min-width: 769px) {
    .mp-banner__image {
        width: 100%;
        height: 330px;
        object-fit: fill; /* stretch to fill area: full width, fixed height, no cropping */
    }
}

/* Mobile */
@media (max-width: 768px) {
    .mp-banner__image {
        width: 100%;
        height: 340px;
        object-fit: fill; /* stretch to fill area: full width, fixed height, no cropping */
    }
}