/* ====================
   ACCORDION - FEATURES
   ====================  */


   
/* Layout */
.accordion__features {
  text-align: left;
  display: flex;
  justify-content: space-between; }

.accordion__features .accordion__items__content,
.accordion__features .accordion__items__images {
   flex: 0 0 48%; }

.accordion__features .accordion__item {
  max-width: 440px;
  border-bottom: 1px solid var(--color__gray__10); }

.accordion__features .accordion__item:last-of-type {
  border-bottom: none; }
   
.accordion__features .accordion__item__content__body {
  padding-bottom: var(--spacing__sm); }



.accordion__features .accordion__item__content__body {
    display: none;
    overflow: hidden; }

.accordion__features .accordion__item__content__body .footer {
  margin-top: var(--spacing__sm); }

.accordion__features .accordion__item__header {
  padding: 1.5em 0;
  position: relative; }

  
 .accordion__features .accordion__item__header .toggle {
  position: absolute;
  top: 2em;
  right: 0; }   
  
 
 
 /* Images */
.accordion__features .inline-image {
   height: 0;
   overflow: hidden;
   max-width: 100%; }
 
.accordion__features .inline-image svg {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  max-height: 280px; }

 .accordion__features .inline-image img {
  height: auto;
  margin: 0 auto;
  display: block;
  max-height: 280px; }
    
      
.accordion__items__images {
   position: relative; }

.accordion__items__images .container {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%; }
        
.accordion__items__images .image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%; }
   
.accordion__items__images .image img,
.accordion__items__images .image svg {
  max-width: 100%;
  max-height: 100%;
  height: auto;
  width: auto;
  display: block; }
  

      
/* .accordion__items__images img {
    transition: opacity .4s; } */

  

@media (max-width: 860px) {
  
   .accordion__items__images {
     display: none; }
     
    .accordion__features .accordion__items__content {
        flex: 0 0 100%; }
        
    .accordion__features .accordion__item {
      max-width: 100% ; }
        
   .accordion__features .inline-image { 
     height: auto;
     margin: var(--spacing__sm) auto; }
      
 }