@import 'template.scss';

.banner {
  position: relative;
  height: 634px;
  background-color: $shade1;
  background-image: url("banner2.jpg");
  background-size: cover;
  background-position: center center;
  opacity: 0.7;
}

.logo {
  position: absolute;
  bottom: 20px;
  left: 30px;
}

.nameContainer {
  opacity: 1;
  color: $white;
  font-family: var(--header-font);
  position: absolute;
  bottom: 50px;
  right: 0;
  width: 50vw;
  line-height: 1.7em;
}

.catholic {
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 20px;
}

.name {
  font-size: 90px;
  font-weight: 700;
  margin-bottom: 30px;
  line-height: 1em;
}

.location {
  font-size: 40px;
  font-weight: 700;
}

@media screen and (max-width: 576px) {
  .logo {
    left: -20px;
    bottom: -30px;
  }

  .nameContainer {
    padding: 20px;
    position: relative;
    top: 100px;
  }

  .name {
    font-size: 50px;
    line-height: 0.8em;
  }

  .catholic, .location {
    font-size: 30px;
  }
}