@import '../../../styles/common.scss';

.container {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 130px 1fr;
  grid-column: span 4;
  grid-row: span 2;
  place-items: center;

  text-decoration: none;
  overflow: hidden;

  color: var(--landingpage-largetile-color, $landingpage-largetile-color);
  background-color: var(
    --landingpage-largetile-background-color,
    $landingpage-largetile-background-color
  );

  &:hover {
    background-color: var(
      --landingpage-largetile-hover-background-color,
      $landingpage-largetile-hover-background-color
    );
  }

  &.disabled {
    background-color: var(
      --landingpage-largetile-disabled-background-color,
      $landingpage-largetile-disabled-background-color
    );
  }

  .icon {
    align-self: center;
    width: 100px;
    height: 100px;
    svg * {
      stroke: var(
        --landingpage-largetile-stroke-color,
        $landingpage-largetile-stroke-color
      );
    }

    > * {
      width: 100%;
      height: 100%;
    }
  }

  .titlesSection {
    display: grid;
    padding: 0 15px 15px 15px;
    place-items: center;
    align-self: stretch;

    text-align: center;

    .label {
      font-size: 23px;
      overflow: hidden;
    }

    .subtitle {
      font-size: 16px;
      align-self: end;
    }
  }
}
