/*=========================================================
  JoeInfo Case Study Components v1.1
=========================================================*/

:root{
    --compare-gap:10px;
    --compare-height:750px;

    --paper:#fff;
    --line:#C9BC9C;
    --border:#e3dac0;

    --navy:#1E3A5F;
    --mustard:#E8B04B;
}

/*---------------------------------------------------------
  General
---------------------------------------------------------*/





/*---------------------------------------------------------
  Evidence Block
---------------------------------------------------------*/

.evidence{
    margin:1rem 0 .5rem;
    padding:10px;

    background:var(--paper);
    border:1px solid var(--line);
    border-radius:3px;
}

figure{
    margin:0;
}

figcaption, .websiteredesigncaptions {
    margin-top:10px;
    padding-left:12px;
    font-size:18px;
    color:#000;
    font-style: italic;
    line-height: 1.5;
}

/*---------------------------------------------------------
  Comparison Layout
---------------------------------------------------------*/

.compare{
    display:flex;
    gap:var(--compare-gap);
}

.compare figure{
    display:flex;
    flex-direction:column;

    overflow:hidden;
    min-width:0;
}

.compare-title{
    margin-bottom:6px;
    text-align:center;
    font-weight:500;
	font-size:14px;
	font-family:Verdana, sans-serif;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:var(--navy);
}

/*---------------------------------------------------------
  Column Widths
---------------------------------------------------------*/

.compare-50 figure{
    flex:1;
}

.compare-1-3 .small,
.compare-2-3 .small{
    flex:1;
}

.compare-1-3 .large,
.compare-2-3 .large{
    flex:2;
}

/*---------------------------------------------------------
  Images
---------------------------------------------------------*/

.evidence img,
.compare img{
    display:block;
    width:100%;

    border:1px solid var(--border);
}

.compare img{
    height:var(--compare-height);

    object-fit:cover;
    object-position:top;
}

/*---------------------------------------------------------
  Optional Code Samples
---------------------------------------------------------*/

.code{
    padding:10px;

    background:#f7f3e9;
    border:1px solid #ddd;

    white-space:pre-wrap;
    font:12px monospace;
}

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

@media (max-width:540px){

    .compare{
        flex-direction:column;
    }

    .compare figure{
        overflow:visible;
    }

    .compare img{
        height:auto;
        object-fit:unset;
    }

    .compare .small{
        max-width:206px;
        margin:0 auto;
    }

}