/* Chooser Region */

chooser-region {
  display: flex;
  flex-direction: column;
  position: relative;
  height: calc(100vh - 60px);
}

chooser-region a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  flex: 1;
  min-height: 300px;
  text-align: center;
  transition: flex 0.5s;
}

chooser-region a {
  border-top: 1px solid;
  border-bottom: 1px solid;
  border-image-source: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
  border-image-slice: 1 0;
}

chooser-region a:first-of-type {
  border-top: none;
}

chooser-region a:last-of-type {
  border-bottom: none;
}
  
chooser-region a:hover,
chooser-region a:focus,
chooser-region a:active {
  text-decoration: none;
}

chooser-region a::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  content: '';
  transition: background 0.5s;
}
  
chooser-region a:hover::before,
chooser-region a:focus::before,
chooser-region a:active::before {
  background-color: rgba(0, 0, 0, 0.5);
}

chooser-region a * {
  position: relative;
}

@media (min-width: 1200px) and (min-height: 600px) {

  chooser-region {
    flex-direction: row;
  }

  chooser-region a {
    border-top: none;
    border-bottom: none;
    border-left: 1px solid;
    border-right: 1px solid;
    border-image-source: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
    border-image-slice: 0 1;
  }

  chooser-region a:first-child {
    border-left: none;
  }
  
  chooser-region a:last-of-type {
    border-right: none;
  }

  chooser-region a:hover,
  chooser-region a:focus,
  chooser-region a:active {
    flex: 1.07;
  }

}