@charset "utf-8";
/* CSS Document */

/* ==========================================================
   Media + Text Component
========================================================== */

.component-media-text{
    margin-bottom:8rem;
}

.component-media-text:last-child{
    margin-bottom:0;
}

/* ---------- Bild ---------- */

.component-media{
    position:relative;
    padding-left:2rem;
	
}

.component-media-right{
    padding-left:0;
    padding-right:2rem;
	
}

.component-media-bg{
    position:absolute;
    top:-2rem;
    bottom:-2rem;
    left:calc(-100vw);
    right:15rem;

    background:var(--sm-soft-blue);

    border-radius:0 1.5rem 1.5rem 0;
}

.component-media-right .component-media-bg{
    left:10rem;
    right:calc(-100vw);

    border-radius:1.5rem 0 0 1.5rem;
}

.component-media-image{
    width: 100%;
max-width: 500px;
    position:relative;
    overflow:hidden;
    border-radius:1rem;
    box-shadow:var(--sm-shadow);
}

.component-media-image img{
    display:block;

    width:100%;
    height:260px;

    object-fit:cover;
}

/* ---------- Text ---------- */

.component-content{
    max-width:520px;
}

.component-eyebrow{
    margin-bottom:.75rem;

    color:var(--sm-primary);

    font-family:"JetBrains Mono", monospace;
    font-size:.8rem;
    font-weight:600;

    letter-spacing:.06em;
    text-transform:uppercase;
}

.component-title{
    margin-bottom:1rem;
}

.component-lead{
    margin-bottom:1rem;

    color:var(--sm-text);

    font-size:1.1rem;
    font-weight:500;
}

.component-content p:not(.component-eyebrow):not(.component-lead){
    color:var(--sm-text);
    line-height:1.7;
}


.functions-left,
.functions-right {
    width: 520px;
    max-width: 100%;
}

.functions-left {
    margin-left: -45px;
}

.functions-right {
    margin-right: -45px;
}

/* ---------- Mobile ---------- */

@media (max-width: 991.98px) {

    .component-media-text {
        margin-bottom: 5rem;
    }

    .component-media,
    .component-media-right {
        padding: 0;
    }

    .component-media-bg {
        display: none;
    }

    .component-content {
        max-width: 100%;
    }
	
  .functions-left,
    .functions-right {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
  
}