/* ===============
   COLUMN SHOWCASE
   ===============  */

.column-showcase {
   display: flex;
   gap: var(--spacing__sm);
   text-align: left; }
   
.column-showcase .column {
   position: relative;
   flex: 0 0 calc((100% - 2 * var(--spacing__sm)) / 3);
   background: var(--color__gray__05);
   padding: var(--spacing__xxs);
   border-radius: var(--border-radius); }

/* Header */
.column-showcase .column__header {}

.column-showcase .column__header__title {
   display: flex;
   gap: var(--spacing__sm); }

.column-showcase .column__header__introduction {
   margin-top: var(--spacing__xs); }

.column-showcase .column__body {
   position: relative;
   border-top: 1px solid var(--color__gray__10);
   margin-top: var(--spacing__xs);
   padding-top: var(--spacing__xs); }


.column-showcase .column__body h4 {
   margin-bottom: 1em; }
   
.column__header__title__icon {}

.icon {}
.icon__48 {}
.column__header__title__heading {}


.column__body__footer {
   padding-top: var(--spacing__sm); }


/* Toggle */
.column-showcase .toggle {
   position: absolute;
   display: none;
   right: var(--spacing__xs); }  
   
   
   
@media (max-width: 1000px) {
   
   .column-showcase {
      flex-wrap: wrap; }
          
   .column-showcase .column {
      flex: 0 0 100%; }
   
   .column-showcase .toggle {
     display: block; }
   
      
}


/* Animation */
.js .column-showcase .column {
   transition: transform .6s, opacity .6s;
   opacity: 0;
   transform: translateY(20px); }

.inview .column-showcase .column {
   opacity: 1;
   transform: translateY(0); }

.inview.animating .column-showcase .column:nth-child(1) { transition-delay: .2s; }
.inview.animating .column-showcase .column:nth-child(2) { transition-delay: .4s; }
.inview.animating .column-showcase .column:nth-child(3) { transition-delay: .6s; }

.inview.animating .column-showcase .column {
     opacity: 1;
     transform: translateY(0); }
 
.inview .column-showcase .column {
   opacity: 1;
   transform: translateY(0);
   transition-delay: 0s; }

 .column-showcase .column .icon {
    transition: transform .4s; }
    
/* Interaction */
@media (min-width: 1000px) {
   
   .column-showcase .column:hover {
     transition-delay: 0s !important;
     transform: translateY(-5px); }
     
   .column-showcase .column:hover .icon {
      transform: scale(1.05); }
  
}

@media (max-width: 1000px) {
   
   .column-showcase .column:hover {
      transform: scale(1.02);
      transition-delay: 0s !important; }
  
}