.campaign-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
}

@media (min-width: 1024px) {
  .campaign-hero {
    aspect-ratio: initial;
  }
}

.campaign-hero:before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  content: '';
  background-color: rgba(0,0,0,0.4);
  z-index: 1;
}

@media (min-width: 1024px) {
  .campaign-hero:after {
    position: absolute;
    top: 50;
    bottom: 0;
    right: 0;
    width: 30%;
    height: 50%;
    background: url(../../assets/campaign-european-week-hero.svg);
    background-repeat: no-repeat;
    background-size: cover;
    content: '';
    display: block;
    z-index: 2;
  }
}

.campaign-hero__image img {
  width: 100%;
  display: block;
  position: relative;
  object-fit: cover;
  object-position: center;
  aspect-ratio: 1 / 1;
}

@media (min-width: 1024px) {
  .campaign-hero__image img  {
    aspect-ratio: initial;
  }
}

.campaign-hero__content {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.campaign-hero__item {
  grid-column: span 12;
}

@media (min-width: 1024px) {
  .campaign-hero__item {
    grid-column-start: 1;
    grid-column-end: 5;
  }
}

.campaign-hero__content h1,
.campaign-hero__content p {
  color: var(--anrt-color-white)
}

.campaign-hero__content h1 {
  font-size: var(--anrt-font-size-150);
}

.campaign-hero__content p {
  font-size: var(--anrt-font-size-100);
}

@media (min-width: 1024px) {
  .campaign-hero__content h1 {
    font-size: var(--anrt-font-size-250);
  }

  .campaign-hero__content p {
    font-size: var(--anrt-font-size-150);
  }
}

.campaign-hero__content a {
  background-color: var(--anrt-color-sport-ireland-campaign-main-color);
  color: var(--anrt-color-white);
  display: inline-block;
  font-weight: bold;
  padding: var(--anrt-spacing-050) var(--anrt-spacing-100);
  text-decoration: none;
  border-radius: 2rem;
  font-size: var(--anrt-font-size-100);
  margin-block-start: var(--anrt-spacing-050);
}

.campaign-hero__content a:hover,
.campaign-hero__content a:focus,
.campaign-hero__content a:focus-within {
  background-color: var(--anrt-color-white);
  color: var(--anrt-color-sport-ireland-campaign-main-color);
}

.campaign-hero__image-scroll {
  position: absolute;
  bottom: var(--anrt-spacing-100);
  left: 0;
  right: 0;
  text-align: center;
  z-index: 1;
}

.campaign-hero__image-scroll button {
  background: transparent;
  color: var(--anrt-color-white);
  font-size: var(--anrt-font-size-125);
  border: none;
  appearance: none;
  padding: var(--anrt-spacing-050) var(--anrt-spacing-100);
  transition: all 200ms linear;
  border-radius: 2rem;
}

.campaign-hero__image-scroll button:hover,
.campaign-hero__image-scroll button:focus,
.campaign-hero__image-scroll button:focus-within,
.campaign-hero__image-scroll button:active {
  background: rgba(0,0,0,0.4);
  text-decoration: none;
}

.campaign-hero__logo-top {
  margin-block-end: var(--anrt-spacing-100);
}

@media (min-width: 1024px) {
.campaign--sports4empowerment .campaign-hero {
    overflow: hidden;
  }
}

.campaign--sports4empowerment .campaign-hero:after {
  height: 140%;
  top: 0;
  bottom: 0;
  right: 0;
  width: 50%;

  background: url(../../assets/campaign-sports-empowerment-hero.svg);
  background-position: center right;
  background-repeat: no-repeat;
  background-size: cover;
}


.campaign--sports4empowerment .campaign-hero__item a {
  background-color: var(--anrt-color-sport-ireland-campaign-main-color-a);
}

.campaign--sports4empowerment .campaign-hero__item a:hover,
.campaign--sports4empowerment .campaign-hero__item a:focus,
.campaign--sports4empowerment .campaign-hero__item a:focus-within {
  background-color: var(--anrt-color-sport-ireland-campaign-main-color);
  color: var(--anrt-color-white);
}

.campaign-hero__eu-label {
  display: none;
}

@media (min-width: 1024px) {
  .campaign-hero__eu-label {
    position: absolute;
    bottom: 0;
    right: 5%;
    display: block;
    z-index: 3;
  }

  .campaign-hero__eu-label img {
    display: block;
    margin-block-end: -1px;
  }
}
