.ada_graphic {
    position: relative;
    padding: 4% 0.4%;
}

.ada_graphic-top {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
}

.ada_graphic-bottom {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
}

/* The img border setting must be nested to match the selectivity of 
'main img{}' in css_pp_primary.css; */
.ada img {
    border: none;
    width: 100%;
    border-radius: 5px;
}

.ada_graphic_inner {
    background-image: linear-gradient(rgba(223, 215, 222, 0.1), rgba(223, 215, 222, 0.85)); 
    background-repeat: no-repeat;
    background-size: 100%;
    border-radius: 15px;
    border: 1px double gray;
    border-image: url(../images/vict-borderImage-sides2.png) 2 3 stretch;
    padding: 25px;
}

.ada_inner-images {
    display: flex;
    align-items: center;
    width: 90%;
    margin: 0 auto;
    padding: 4%;
}

.ada_inner-side {
    flex: 0 0 30%;
    max-width: 250px;
}

.ada_inner-side img {
    border-radius: 0;
}

.ada_inner-center {
    flex: auto;
    max-width: 250px;
    padding: 0 5px;
}

.ada_inner-text {
    font-family: 'EB Garamond';
}

.ada-heading {
    font-size: 1.4rem;
    text-align: center;
    margin: 0;
    padding: 0;
}

.ada_description p:not(:first-child):not(:last-child) {
    padding: 1rem 0;
}

.ada .bi-grid-3x3 {
    color: #446dab; 
}

.aenigmas-link-wrap {
    font-size: 1.1em;
}


/****************************Responsive**************************/
/*                                                              */
/*     Bootstrap 4 Breakpoints:                                 */
/*     sm:  @media screen and (min-width: 576px)                */
/*     md:  @media screen and (min-width: 768px)                */
/*     lg:  @media screen and (min-width: 992px)                */
/*     xl:  @media screen and (min-width:1200px)                */
/*                                                              */
/****************************************************************/

@media screen and (min-width: 576px) {
    .ada-heading {
        font-size: 1.6rem;
    }

    .ada_description {
        font-size: 1.1rem;
    }

    /* Nested with other rainbow-underline hovers in css_pp_primary.css
    .hasHover .aenigmas-link-text {}
    */
}

@media screen and (min-width: 768px) {
    .ada_graphic {
        width: 80%;
        margin: 0 auto;
        padding: 3.2% 0.4%;
    }
    
    .ada_description {
        padding: 1rem 0;
    }

    .ada-heading {
        font-size: 1.8rem;
    }
}

@media screen and (min-width: 992px) {
    /* This setting must be nested to override selectivity of '.ada img{}' above; */
    .ada_inner-center img {
        border: 1px solid black;
    }

    .ada_description {
        font-size: 1.2rem;
    }
}