.footer-extra {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  align-items: flex-start;
}

.footer-contact {
  text-align: left;
}

.footer-socials {
  text-align: right;
}

.footer-copyright {
  text-align: center;
  margin-top: 2rem;
}

img.social-icon {
  width: 32px;
  height: 32px;
  filter: drop-shadow(0 0 4px rgba(255,255,255,.15));
}

img.svg:hover,
svg:hover {
  color: #ff4081;
}

.article-icon {
  position: relative;
  padding-bottom: 4rem;
}

.article-icon::after {
  content: "";
  position: absolute;
  right: 1.25rem;
  bottom: 1.25rem;

  width: 3rem;
  height: 3rem;

  background-color: currentColor;
  color: #f5f5f5;

  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;

  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;

  opacity: 0.85;
  pointer-events: none;
}

.article-icon-rules::after {
  mask-image: url("/images/icons/hiphop/rules.svg");
  -webkit-mask-image: url("/images/icons/hiphop/rules.svg");
}

.article-icon-events::after {
  mask-image: url("/images/icons/hiphop/events.svg");
  -webkit-mask-image: url("/images/icons/hiphop/events.svg");
}

.article-icon-sounds::after {
  mask-image: url("/images/icons/hiphop/sounds.svg");
  -webkit-mask-image: url("/images/icons/hiphop/sounds.svg");
}

/* =================================================== */
/* ARTICLE PAGE ICONS                                  */
/* =================================================== */
/*
  Adds a decorative icon to articles on selected menu pages.

  The Joomla body receives an itemid-XXX class based on the active menu item.
  Template Creator CK wraps article content in .tck-article.

  Icons are applied as CSS masks, so the visible colour is controlled through
  background-color, not by the SVG file itself.
*/

/* =================================================== */
/* SHARED ICON LAYOUT                                  */
/* =================================================== */

.itemid-107 .tck-article,
.itemid-108 .tck-article,
.itemid-109 .tck-article,
.itemid-110 .tck-article,
.itemid-111 .tck-article,
.itemid-112 .tck-article,
.itemid-113 .tck-article {
  position: relative;

  /* Prevent text from running underneath the decorative icon. */
  padding-bottom: 5rem;

  /* Easy tuning knobs. */
  --article-icon-size: 4rem;
  --article-icon-right: 1.25rem;
  --article-icon-bottom: 1.25rem;
  --article-icon-color: #444;
  --article-icon-opacity: 0.85;
}

.itemid-107 .tck-article::after,
.itemid-108 .tck-article::after,
.itemid-109 .tck-article::after,
.itemid-110 .tck-article::after,
.itemid-111 .tck-article::after,
.itemid-112 .tck-article::after,
.itemid-113 .tck-article::after {
  content: "";
  position: absolute;
  right: var(--article-icon-right);
/*
  bottom: var(--article-icon-bottom);
*/
  top: var(--article-icon-bottom);
  width: var(--article-icon-size);
  height: var(--article-icon-size);

  background-color: var(--article-icon-color);

  mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;

  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;

  opacity: var(--article-icon-opacity);
  pointer-events: none;
}

/* =================================================== */
/* HOME                                                */
/* =================================================== */

.itemid-101 .tck-article::after {
  mask-image: url("/images/Icons/hiphop-home.svg");
  -webkit-mask-image: url("/images/Icons/hiphop-home.svg");
}

/* =================================================== */
/* COMPETITIONS                                        */
/* =================================================== */

.itemid-107 .tck-article::after {
  mask-image: url("/images/Icons/dimgray/hiphop-competitions-dimgray.svg");
  -webkit-mask-image: url("/images/Icons/dimgray/hiphop-competitions-dimgray.svg");
}

/* =================================================== */
/* REGISTER                                            */
/* =================================================== */

.itemid-112 .tck-article::after {
  mask-image: url("/images/Icons/hiphop-register.svg");
  -webkit-mask-image: url("/images/Icons/hiphop-register.svg");
}

/* =================================================== */
/* RULES                                               */
/* =================================================== */

.itemid-113 .tck-article::after {
  mask-image: url("/images/Icons/hiphop-rules.svg");
  -webkit-mask-image: url("/images/Icons/hiphop-rules.svg");
}

/* =================================================== */
/* EVENTS                                              */
/* =================================================== */

.itemid-109 .tck-article::after {
  mask-image: url("/images/Icons/hiphop-events.svg");
  -webkit-mask-image: url("/images/Icons/hiphop-events.svg");
}

/* =================================================== */
/* SOUNDZ                                              */
/* =================================================== */

.itemid-110 .tck-article::after {
  mask-image: url("/images/Icons/hiphop-sounds.svg");
  -webkit-mask-image: url("/images/Icons/hiphop-sounds.svg");
}

/* =================================================== */
/* ABOUT US                                            */
/* =================================================== */

.itemid-108 .tck-article::after {
  mask-image: url("/images/Icons/hiphop-about.svg");
  -webkit-mask-image: url("/images/Icons/hiphop-about.svg");
}

/* =================================================== */
/* CONTACT                                             */
/* =================================================== */

.itemid-111 .tck-article::after {
  mask-image: url("/images/Icons/hiphop-contact.svg");
  -webkit-mask-image: url("/images/Icons/hiphop-contact.svg");
}

/* =================================================== */
/* MOBILE TUNING                                       */
/* =================================================== */
/*
  Optional: slightly reduce the icon size on narrow screens.
*/

@media (max-width: 700px) {
  .itemid-107 .tck-article,
  .itemid-108 .tck-article,
  .itemid-109 .tck-article,
  .itemid-110 .tck-article,
  .itemid-111 .tck-article,
  .itemid-112 .tck-article,
  .itemid-113 .tck-article {
    --article-icon-size: 3rem;
  }
}
/* =================================================== */
/* =================================================== */
/* =================================================== */

/* Mobile */
@media (max-width: 700px) {
  .footer-extra {
    flex-direction: column;
  }

  .footer-contact,
  .footer-socials {
    text-align: center;
    width: 100%;
  }
}