#card_cont { display: flex; justify-content: center; margin:2rem auto 0; }

.cards { display: flex; column-gap: 40px; justify-content: center; }
.flow > * + * { margin-top: 20px; }
.card_depth { display: grid; place-items: center; width: 100%; overflow: hidden; border-radius: 0.625rem; box-shadow: 0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.25); }
.card_depth > * { grid-column: 1 / 2; grid-row: 1 / 2; }
.card__background { object-fit: cover; max-width: 100%; height: 100%; }
.card__content { display: flex; flex-direction: column; justify-content: space-around; align-self: flex-end; width: 100%; height: 65%; padding: 12% 1.25rem 1.875rem;
  background: linear-gradient(180deg, hsla(0, 0%, 0%, 0) 0%, hsla(0, 0%, 0%, 0.3) 10%, hsl(0, 0%, 0%) 100%); }

.card__content--container { }
.card__title { position: relative; width: fit-content; width: -moz-fit-content; font-size: 3.6rem; color: #fff; line-height: 1.1; padding: 1rem; }
.card__title::after { content: ""; position: absolute; height: 5px; width: calc(100% + 1.25rem); bottom: calc((1.25rem - 0.5rem) * -1); left: -1.25rem; background-color: #5cc0bb; }
.card__description { font-size: 2rem; line-height: 1.5; color: #fff; padding: 0 3rem; }
.card__button { padding: 3rem 2rem; font-size: 2rem; border-radius: 0.45em; border: none; background-color: #5cc0bb; color: #000; }
.card__button:focus { outline: 2px solid black; outline-offset: -2px; }


@media (any-hover: hover) and (any-pointer: fine) {
    
  .card__content { transform: translateY(62%);  transition: transform 500ms ease-out; transition-delay: 500ms; }
  .card__title::after { opacity: 0; transform: scaleX(0); transition: opacity 1000ms ease-in, transform 500ms ease-out; transition-delay: 500ms; transform-origin: right; }
  .card__background { transition: transform 500ms ease-in; }
  .card__content--container > :not(.card__title),.card__button { opacity: 0; transition: transform 500ms ease-out, opacity 500ms ease-out; }
  .card_depth:hover,.card_depth:focus-within { transform: scale(1.02); transition: transform 500ms ease-in; }
  .card_depth:hover .card__content,.card_depth:focus-within .card__content { transform: translateY(0); transition: transform 500ms ease-in; }
  .card_depth:focus-within .card__content { transition-duration: 0ms; }
  .card_depth:hover .card__background,.card_depth:focus-within .card__background { transform: scale(1.3); }
  .card_depth:hover .card__content--container > :not(.card__title),.card_depth:hover .card__button,.card_depth:focus-within .card__content--container > :not(.card__title),.card_depth:focus-within .card__button {
    opacity: 1; transition: opacity 500ms ease-in; transition-delay: 1000ms; }
  .card_depth:hover .card__title::after,.card_depth:focus-within .card__title::after { opacity: 1; transform: scaleX(1); transform-origin: left; transition: opacity 500ms ease-in, transform 500ms ease-in; transition-delay: 500ms; }
    
}


@media only screen and (max-width: 950px) {

    .cards { flex-direction: column; }    
    .card_depth ~ .card_depth { margin-top: 40px; }
    
}


@media only screen and (max-width: 500px) {
    
    .card__title { font-size: 2.4rem; }
    .card__description { font-size: 1.6rem; padding: 0; }
    .card__button { padding: 2rem; }
}