.bs {
  position: fixed;
  inset: 0;
  z-index: 10;

  width: 100vw;
  height: 100vh;

  background-color: hsla(0, 0%, 0%, 0.75);
  transition: $transition-regular;
  box-shadow: $shadow-grey;

  &__close {
    position: absolute;
    top: 2rem;
    right: 1.8rem;

    font-size: $font-size-large;
    color: $color-white;

    cursor: pointer;
    transition: $transition-regular;

    &:hover {
      color: $color-primary-regular;
    }
  }

  &__content {
    @include flex(4rem, initial, initial, column);

    position: relative;

    padding: 6rem;

    max-width: 90%;
    height: 90%;

    background-color: $color-grey-regular;
    overflow-y: scroll;
    overflow-x: hidden;
  }

  &__entry {
    display: grid;
    grid-template-columns: repeat(3, 33.3%);
    grid-template-rows: repeat(3, 1fr);
    gap: 2.4rem;
  }

  &__heading {
    grid-row: 1 / 2;
    grid-column: 1 / 4;
  }

  &__details {
    grid-row: 2 / 3;
    grid-column: 1 / 4;

    width: 95%;
  }

  &__btn {
    grid-row: 3 / 4;
    grid-column: 1 / 2;
  }
}
