@layer kz-components {
  .root {
    perspective: 800px;
  }

  .tile {
    position: relative;
    width: 330px;
    height: 370px;
    transition: transform var(--animation-duration-slow, 400ms)
      var(--animation-easing-function-ease-in-out, cubic-bezier(0.455, 0.03, 0.515, 0.955));
    transform-style: preserve-3d;
    box-shadow: var(--shadow-small-box-shadow);
    border-radius: 7px;
    background-color: var(--color-white);

    [data-tile-grid] & {
      width: auto;
    }

    @media (width <= 767px) {
      width: 100%;
      min-width: 226px;
      max-width: 370px;
    }

    @media (width <= 480px) {
      max-width: 100%;
    }
  }

  .titleMeta {
    padding-top: var(--spacing-4);
  }

  .face {
    position: absolute;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border: var(--border-width-1) solid var(--generic-tile-border-color);
    border-radius: var(--border-solid-border-radius);
    background-color: var(--generic-tile-background-color);

    * {
      backface-visibility: hidden;
    }
  }

  .faceFront {
    justify-content: space-between;
    padding: var(--spacing-xl) var(--spacing-md) var(--spacing-md);
  }

  .faceBack {
    --generic-tile-border-color: var(--color-blue-400);
    --generic-tile-background-color: var(--color-blue-100);

    padding-top: var(--spacing-xl);
    transform: rotateY(180deg);
  }

  .default {
    --generic-tile-border-color: var(--color-gray-500);
    --generic-tile-background-color: var(--color-white);
  }

  .expert-advice {
    --generic-tile-border-color: var(--color-purple-400);
    --generic-tile-background-color: var(--color-purple-100);
  }

  .isFlipped {
    transform: rotateY(179deg);
  }

  .title {
    text-align: center;
    padding-bottom: var(--spacing-sm);
    backface-visibility: hidden;
  }

  .actions {
    display: flex;
  }

  .informationBtn {
    inset-block-start: 0;
    inset-inline-end: 0;
    position: absolute;
    color: rgb(var(--color-purple-800-rgb), 0.5);
  }

  .information {
    display: flex;
    padding-bottom: var(--spacing-md);
    padding-right: var(--spacing-md);
    padding-left: var(--spacing-md);
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    text-align: left;
    border-radius: 0 0 7px 7px;
  }

  .footer {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: var(--spacing-sm);
    height: var(--spacing-xl);
  }
}