@use "../variables.scss";
@use "../mixins.scss";

$table-item_img_width: 100px;
$table-item_margin_between_items: 10px;
$table-item_margin_img_to_paragraph: 10px;

.showcase {
  display: flex;
  height: 100vh;
  background-image: url("../../resources/img/showcase.jpg");
  backdrop-filter: brightness(0%);

  img {
    width: 100%;
    height: auto;
    filter: brightness(50%);
  }

  h1 {
    text-align: center;
    font: 800 128px "Montserrat", sans-serif;
    color: #FFFFFF;
  }
}

.table {
  display: flex;
  flex-direction: column;

  .table-item {
    margin-top: $table-item_margin_between_items;
    display: inline-flex;
    flex-direction: row;

    img {
      margin-right: $table-item_margin_img_to_paragraph;
      height: $table-item_img_width;
      width: $table-item_img_width;
    }
  }

  .reverse {
    flex-direction: row-reverse;

    img {
      margin-right: 0;
      margin-left: $table-item_margin_img_to_paragraph;
    }

    p {
      text-align: right;
    }

    .vertical-separator {
      margin-right: 0;
      margin-left: $table-item_margin_img_to_paragraph;
    }
  }

  .vertical-separator {
    height: $table-item_img_width + 20px;
    border: solid 1px variables.$clr_brand;
    margin-right: $table-item_margin_img_to_paragraph;
  }
}