@layer components {
  .area {
    --area-bg: transparent;

    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;

    background: var(--area-bg);

    @media screen and (--bp-tablet-down) {
      border-bottom: var(--size-1) solid var(--color-palette-gunmetal);

      &:last-child {
        border-bottom: none;
      }
    }
  }

  .area_1 {
    position: relative;
    grid-area: area_1;
  }

  .area_2 {
    position: relative;
    grid-area: area_2;
  }

  .area_3 {
    position: relative;
    grid-area: area_3;
  }

  .area_4 {
    position: relative;
    grid-area: area_4;
  }

  .area_5 {
    position: relative;
    grid-area: area_5;
  }

  .hasBGImg {
    position: relative;

    &:hover {
      & .bgImg {
        animation: var(--area-animation-keyframe) var(--area-animation-duration) var(--area-animation-timing);
      }
    }
  }

  .bgImg {
    --area-bg-animation-keyframe: none;
    --area-bg--animation-duration: 0s;
    --area-bg--animation-timing: linear;
    --area-bg-filter: grayscale(100%) contrast(10) brightness(250);
    --area-bg-blendmode: color-dodge;

    position: absolute;
    z-index: -1;

    width: 100%;
    height: 100%;

    object-fit: cover;
    filter: var(--area-bg-filter);
    mix-blend-mode: var(--area-bg-blendmode);

    @media screen and (--bp-tablet-down) {
      display: none;
    }
  }

  @media screen and (--bp-desktop) {
    .chainbreaker {
      --area-animation-keyframe: var(--kf-color-bleed);
      --area-animation-duration: var(--img-colorbleed-duration);
      --area-animation-timing: var(--img-colorbleed-timing);

      & .bgImg {
        z-index: -2;
      }

      &.hasBGImg {
        --divider-color: transparent;
        --title-color: transparent;
        --subtitle-color: transparent;
        --subtitle-transition: all 0.3s ease-in-out;
        --title-transition: color 0.3s ease-in-out;

        &:hover {
          --divider-color: var(--color-tertiary);
          --title-color: var(--color-tertiary);
          --subtitle-color: var(--color-tertiary);
        }
      }
    }
  }
}