body {
  background-color: var(--primary-background-colour);
}

* {
  margin: 0;
}

.image-container {
  object-fit: cover;
  overflow: clip;
  justify-content: center;
  cursor: default;
  position: relative;
}

.blur {
  filter: blur(2px);
}

.filled {
  width: 110%;
}

.main-image {
  max-height: 80vh;
  width: 100%;
  display: flex;
  filter: blur(2px);
  position: relative;
  overflow: clip;
  transform: scale(1.1);
  z-index: -1;
  pointer-events: none;
  user-select: none;
}

.container-text {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 5vw;
  font-weight: bold;
  font-family: "Brush Script MT", cursive;
}

.image-container::before,
.image-container::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 15%;
  pointer-events: none;
}

.image-container::before {
  top: 0;
  background: linear-gradient(
    to bottom,
    var(--primary-background-colour),
    transparent
  );
}

.image-container::after {
  bottom: 0;
  background: linear-gradient(
    to top,
    var(--primary-background-colour),
    transparent
  );
}

.text-container {
  text-align: center;
  background-color: var(--primary-background-colour);
  max-width: 70%;
  margin: auto;
  text-align: center;
}

.text-container header {
  background-color: var(--primary-background-colour);
  font-size: 3vw;
  font-weight: bold;
}

.text-container p {
  text-align: left;
}