.showcase-section {
    position: relative;
    margin-top: 20.0rem;
}

.showcase-section h3 {
    margin-bottom: 3.0rem;
}

.card-thumb {
    display: inline-block;
    width: 6.0rem;
    height: 6.0rem;
    position: relative;
    transition: all 0.5s;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.card-thumb.ct-01 {
    background-image: url(/media/gfx/thumb/thumb-rainchiller.png);
}

.card-thumb.ct-02 {
    background-image: url(/media/gfx/thumb/thumb-rainisland.png);
}

.card-thumb.ct-03 {
    background-image: url(/media/gfx/thumb/thumb-learn.png);
}

.card-thumb.ct-04 {
    background-image: url(/media/gfx/thumb/thumb-wege.png);
}

.card-thumb.ct-05 {
    background-image: url(/media/gfx/thumb/thumb-tools.png);
}

.card-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}

.card-item {
    padding: 2.0rem 0 3.5rem;
    position: relative;
    text-align: center;
    overflow: hidden;
    height: 21.0rem;
    transition: background-color 0.8s, color 0.8s;
}

.card-item a {
	color: yellow;
	font-weight: bold;
}

.card-item:hover {
    background-color: #0026FF;
    color: #fff;
}

.card-item:hover .card-summary {
    top: -9.0rem;
}

.card-item .card-description {
    display: block;
    opacity: 0;
    transform: translateY(1rem);
    font-size: 1.4rem;
    padding: 0 0.5rem;
    transition: opacity 0.5s, transform 0.5s; 
}

.card-item:hover .card-description {
    opacity: 1;
    transform: translateY(0);
}

.card-item .card-summary {
    position: relative;
    top: 0;
    transition: top ease-in-out 0.5s;
}

.card-item h6 {
    margin: 1.5rem 0 0;
    min-height: 4.9rem;
    font-size: 1.6rem; 
}

.card-item:hover h6 {
    margin: 2.0rem 0;
    min-height: 0;
}

.card-item .card-description p {
    font-size: 1.4rem;
    color: inherit;
    margin-bottom: 1.0rem; 
}

.card-link {
    color: #FF9200;
	margin-top: 1.5rem;
}

.card-item .card-link::after {
    content: '\27A4';
	color: yellow;
    display: inline-block;
    width: auto;
    height: auto;
    vertical-align: middle;
    margin-left: 0.8rem;
    -webkit-transition: -webkit-transform .5s;
    transition: transform .5s;
    font-size: 1.6rem;
}

.card-item .card-link:hover::after {
    -webkit-transform: translateX(0.5rem);
    transform: translateX(0.5rem);
}

@media all and (max-width: 750px) {

   .showcase-section {
    margin-top: 10.0rem;
	}

    .card-list {
        grid-template-columns: repeat(2, 1fr);
    }

    .card-item {
        height: 25.0rem;
        zoom: 0.8;
    }
}

@media (max-width: 600px) {
    
  
   .card-list h6 {
        min-height: 4.8rem; 
    }
    
    .card-list .card-description {
        font-size: 1.2rem; 
    }
}