@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&display=swap');
/* Variables */
:root {
  --clr-primary-100: #FFFCFA;
  --clr-accent-100: #232323;
  --clr-accent-200: #22333B;
  --clr-accent-300: #C6AC8F;
  --clr-accent-350: #9d8870;
  --clr-accent-400: #EAE0D5;
  --clr-accent-500: #5E503F;
  --fs-100: 1rem;
  --fs-200: 1.125rem;
  --fs-300: 1.25rem;
  --fs-400: 1.375rem;
  --fs-500: 1.5rem;
  --fs-600: 1.75rem;
  --fs-700: 1.875rem;
  --fs-800: 2rem;
  --fw-400: 400;
  --fw-500: 500;
  --fw-600: 600;
  --fw-700: 700;
  --navbar-fs: var(--fs-500);
  --navbar-fw: var(--fw-500);
  --main-header-fs: var(--fs-600);
  --main-header-fw: var(--fw-700);
  --main-header-cta-fs: var(--fs-200);
  --main-header-cta-fw: var(--fw-600);
  --article-header-fs: var(--fs-300);
  --article-header-fw: var(--fw-600);
  --section-header-fs: var(--fs-600);
  --section-header-fw: var(--fw-700);
  --section-description-fs: var(--fs-200);
  --person-name-fs: var(--fs-300);
  --person-name-fw: var(--fw-500);
  --person-title-fs: var(--fs-100);
  --footer-header-fs: var(--fs-300);
  --footer-header-fw: var(--fw-600);
}
@media (min-width:50em) {
  :root {
    --navbar-fs: var(--fs-100);
    --main-header-fs: var(--fs-800);
    --main-header-cta-fs: var(--fs-300);
    --article-header-fs: var(--fs-500);
    --section-header-fs: var(--fs-800);
    --section-description-fs: var(--fs-500);
    --person-name-fs: var(--fs-500);
    --person-title-fs: var(--fs-200);
  }
}
/* Css Reset */
*, *::before, *::after {
    box-sizing: border-box;
}
* {
    margin: 0;
    padding: 0;
    font: inherit; 
}
ul[role="list"],
ol[role="list"] {
  list-style: none;
}
/* Set core root defaults */
html {
  scroll-behavior: smooth;
}
body {
line-height: 1.5;
text-rendering: optimizeSpeed;
-webkit-font-smoothing: antialiased;
}
a:not([class]) {
    text-decoration-skip-ink: auto;
}
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}
input, button, textarea, select {
font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
}
#root, #__next {
isolation: isolate;
}
@media (prefers-reduced-motion: reduce) {
    html:focus-within {
      scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }  
/* Utilities */
.visually-hidden {
  position: absolute;
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.navbar-text {
  font-size: var(--navbar-fs);
  font-weight: var(--navbar-fw);
  text-decoration: none;
  color: var(--clr-primary-100);
}
.hero-description-text {
  font-size: var(--main-header-fs);
  font-weight: var(--main-header-fw);
  text-align: center;
}
.default-button-design {
  width: 300px;
  height: 54px;
  border: none;
  border-radius: 0.5rem;
  outline: none;
  display: block;
  background-color: var(--clr-accent-300);
  color: var(--clr-primary-100);
  text-align: center;
  transition: 0.2s all ease-out;
}
.main-header-cta {
  text-decoration: none;
  font-size: var(--main-header-cta-fs);
  font-weight: var(--main-header-cta-fw);
  display: flex;
  justify-content: center;
  align-items: center;
}
.default-button-design:hover {
  transform: scale(0.99);
  background-color: var(--clr-accent-350);
}
.default-button-design:active {
  transform: scale(0.99);
  background-color: var(--clr-accent-500);
}
.default-button-design:focus-visible {
  outline: 2px solid #ffffff;
}
.article-content-box {
  --max-width: 480px;
  width: min(var(--max-width), 100%);
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  text-align: center;
  padding: 0rem 0.5rem;
}
.article-content-header {
  font-size: var(--article-header-fs);
  font-weight: var(--article-header-fw);
}
.article-description {
  margin-top: 18px;
}
.article-description > * + * {
  margin-top: 10px;
}
.article-description strong {
  font-weight: var(--fw-600);
}
.article-description a {
  margin: 24px auto 0px;
}
.section-content-container {
  --max-width: 1200px;
  --hr-padding : 1.5rem;
  width: min(var(--max-width), 100% - (var(--hr-padding)*2));
  margin-inline: auto;
  text-align: center;
}
.section-content-header {
  font-size: var(--section-header-fs);
  font-weight: var(--section-header-fw);
}
.section-content-description {
  font-size: var(--section-description-fs);
  margin-top: 18px;
}
.footer-nav-header {
  font-size: var(--footer-header-fs);
  font-weight: var(--footer-header-fw);
  color: var(--clr-primary-100);
  text-align: center;
}
.scroll-lock {
  overflow: hidden;
}
/* General Styling */
body {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  letter-spacing: 0.015em;
  color: var(--clr-primary-100);
  background: url("../images/page-bg.svg") no-repeat left top, linear-gradient(175.9deg, #232323 0%, #22333B 100%);
  background-size: cover;
}
.header-sec-container {
  --max-width: 1200px;
  --hr-padding: 1rem;
  width: min(var(--max-width), 100% - (var(--hr-padding)*2));
  margin-inline: auto;
}
.header-desktop-content {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: center;
  margin: 1.5rem 0rem;
}
.header-desktop-content nav{
  grid-column: 1 / 6;
  grid-row: 1 / 2;
}
.logo-sec {
  grid-column: 6 / 8;
  grid-row: 1 / 2;
  display: flex;
  justify-content: center;
  align-items: center;
}
.social-links {
  grid-column: 8 / 13;
  grid-row: 1 / 2;
  display: flex;
  justify-content: flex-end;
  flex-flow: row nowrap;
  align-items: center;
  gap: 32px;
}
.navbar-list {
  list-style-type: none;
  list-style-position: inside;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 60px;
}
.menu-close-button {
  display: none;
}
.multiverse-logo {
  width: 60px;
  height: auto;
}
.multiverse-logo img {
  width: 100%;
  height: auto;
}
.social-links-header {
  display: none;
}
.header-mobile-content {
  display: none;
}
/* Navbar Animation */
.menu-button svg, .menu-close-button svg {
  cursor: pointer;
  transition: 0.2s all ease-out;
}
.menu-button:hover svg, .menu-close-button:hover svg {
  transform: rotate(180deg);
}
.menu-button svg rect, .menu-close-button svg rect, .menu-button svg circle, .menu-close-button svg circle  {
  transition: 0.2s all ease-out;
}
.menu-button:hover svg rect, .menu-close-button:hover svg rect {
  fill: var(--clr-accent-300);
}
.menu-button:hover svg circle, .menu-close-button:hover svg circle {
  stroke: var(--clr-accent-300);
}
.animate-links {
  transition: all 0.1s ease-out;
}
.animate-links:hover {
  color: var(--clr-accent-400);
  fill: var(--clr-accent-400);
}
.animate-links:active {
  color: var(--clr-accent-300);
  fill: var(--clr-accent-300);
}
/* Mobile Navbar */
@media (max-width:56.25em){
  :root {
  --navbar-fs: var(--fs-500);
  }
  .header-sec-container {
    --hr-padding: 0;
  }
  .header-desktop-content {
    width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 1rem;
    background: rgba(34, 51, 59, 0.95);
    backdrop-filter: blur(2.5px);
    position: absolute;
    display: flex;
    flex-flow: column nowrap;
  }
  /* Responsive Navbar */
  #navbar {
    display: none;
    transition: all 0.4s linear;
    z-index: 5;
  }
  [data-status="inactive"] {
    opacity: 0;
    transform: translateX(-100%);
    visibility: hidden;
  }
  [data-status="active"] {
    opacity: 1;
    transform: translateX(0%);
    visibility: visible;
  }
  .header-desktop-content nav {
    order: 1;
    width: 100%;
    margin-top: clamp(100px, 18vh, 160px);
  }
  .social-links {
    order: 2;
    flex-flow: row wrap;
    width: 100%;
    margin-top: 60px;
    padding-top: 60px;
    justify-content: space-evenly;
    gap: 0px 36px;
    border-top: 3px solid rgba(198, 172, 143, 0.7);
  }
  .logo-sec {
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    order: 0;
  }
  .menu-close-button {
    display: block;
  }
  .multiverse-logo {
    width: 40px;
  }
  .navbar-list {
    flex-flow: column nowrap;
  }
  .navbar-list li, .navbar-list li a {
    width: 100%;
    text-align: center;
    display: block;
  }
  .social-links-header {
    display: block;
    width: 100%;
    text-align: center;
    margin-bottom: 36px;
  }
  .header-mobile-content {
    display: block;
    --max-width: 1200px;
    --hr-padding: 1rem;
    width: min(var(--max-width), 100% - (var(--hr-padding)*2));
    margin-inline: auto;
  }
  .mobile-header {
    padding: 1rem 0rem;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
  }
}
/* Hero Content Sec */
.hero-content-sec {
  margin: 80px 0px 160px;
}
.hero-content-container {
  --max-width: 1200px;
  --hr-padding: 1rem;
  width: min(var(--max-width), 100% - (var(--hr-padding)*2));
  margin-inline: auto;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  gap: 80px;
}
.intro-video  {
  width: min(100%, 560px);
  height: auto;
  box-shadow: rgb(0 0 0 / 15%) 0px 15px 25px, rgb(0 0 0 / 5%) 0px 5px 10px;
}
.intro-video iframe {
  width: 100%;
  aspect-ratio: 1 / 0.5625;
}
.hero-description {
  width: min(100%, 500px);
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  padding: 0rem 0.5rem;
  gap: 40px 0px;
}
/* Main article sec */
.main-article-container {
  --max-width: 1200px;
  --hr-padding: 1rem;
  width: min(var(--max-width), 100% - (var(--hr-padding)*2));
  margin-inline: auto;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  gap: 60px;
}
.main-article-image {
  width: min(100%, 600px);
  height: auto;
}
.main-article-image img {
  width: 100%;
  height: auto;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 25px, rgba(0, 0, 0, 0.05) 0px 5px 10px;
}
/* Image Gallery Design */
.image-gallery {
  padding: 0rem 1rem;
  margin-top: 80px;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}
[data-image-showcase-box] > * + * {
  display: block;
  width: 0px;
  height: 0px;
}
.image-box-sec {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
}
.showcase-image {
  width: 100%;
  height: auto;
  padding: 0rem 1rem;
  display: flex;
  justify-content: center;
  overflow: hidden;
}
.slider-left-btn, .slider-right-btn {
  width: 20px;
  height: auto;
  cursor: pointer;
}
.slider-left-btn[disabled="true"], .slider-right-btn[disabled="true"] {
  pointer-events: none;
}
.slider-left-btn svg, .slider-right-btn svg {
  width: 100%;
  height: auto;
}
.slider-left-btn:hover svg path, .slider-right-btn:hover svg path {
  transition: all 0.1s ease-out;
}
.slider-left-btn:hover svg path, .slider-right-btn:hover svg path {
  fill: var(--clr-accent-350);
  transform: scale(0.98);
}
.slider-left-btn:active svg path, .slider-right-btn:active svg path {
  fill: var(--clr-accent-500);
}
.thumbnail-gallery-sec {
  margin-top: 80px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-evenly;
  align-items: center;
  gap: 20px;
}
.thumbnail-gallery-sec .thumbnail-image {
  width: 200px;
  height: auto;
  cursor: pointer;
  transition: all 0.2s ease-out;
}
.thumbnail-image img {
  width: 100%;
  height: auto;
}
.thumbnail-gallery-sec .thumbnail-image:not([data-active-image]):hover {
  transform: scale(0.95);
}
[data-active-image] {
  border: 3px solid var(--clr-accent-300);
  border-radius: 0.5rem;
  transform: scale(1.05);
  overflow: hidden;
}
[data-animate-dir="right"] {
  animation: rightSlide 2s;
}
[data-animate-dir="left"] {
  animation: leftSlide 2s both;
}
[data-animate-dir="center"] {
  animation: centerSlide 1s both;
}
@keyframes rightSlide {
  0% {
    transform: translateX(0%);
    opacity: 1;
  } 
  50% {
    transform: translateX(25%);
    opacity: 0;
  }
  51% {
    transform: translateX(-25%);
    opacity: 0;
  }
  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}
@keyframes leftSlide {
  0% {
    transform: translateX(0%);
    opacity: 1;
  } 
  50% {
    transform: translateX(-25%);
    opacity: 0;
  }
  51% {
    transform: translateX(+25%);
    opacity: 0;
  }
  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}
@keyframes centerSlide {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(0.80);
    opacity: 0;
  }
  51% {
    transform: scale(0.80);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
/* Artists Sec */
.artist-sec {
  padding-top: 120px;
}
.artist-sec .image-box-sec {
  --max-width: 800px;
  width: min(var(--max-width), 100%);
}
.artist-sec .thumbnail-gallery-sec {
  --max-width: 800px;
  width: min(var(--max-width), 100%);
}
img[data-image-name="little-tiffany"] {
  width: min(100%, 353px);
  height: auto;
}
img[data-image-name="cryptotraitor"] {
  width: min(100%, 480px);
  height: auto;
}
img[data-image-name="gdcc1"] {
  width: min(100%, 480px);
  height: auto;
}
/* Gulpilil Sec */
.gulpilil-sec {
  padding-top: 120px;
}
.gulpilil-sec .image-box-sec {
  --max-width: 800px;
  width: min(var(--max-width), 100%);
}
.gulpilil-sec .thumbnail-gallery-sec {
  --max-width: 1200px;
  width: min(var(--max-width), 100%);
}
img[data-image-name="gdcc1"],
img[data-image-name="gulpilil"],
img[data-image-name="gdcc2"],
img[data-image-name="gdcc3"]{
  width: min(100%, 480px);
  height: auto;
}
/* The Champion Sec */
.champion-sec {
  padding-top: 120px;
}
.champion-sec .image-box-sec {
  --max-width: 1100px;
  width: min(var(--max-width), 100%);
}
.champion-sec .thumbnail-gallery-sec {
  --max-width: 1000px;
  width: min(var(--max-width), 100%);
}
img[data-image-name="cblcc1"], img[data-image-name="champion"] {
  width: min(100%, 800px);
  height: auto;
}
img[data-image-name="cblcc2"], img[data-image-name="cblcc3"] {
  width: min(100%, 480px);
  height: auto;  
}
/* Second article sec */
.second-article-sec {
  padding-top: 120px;
}
.second-article-container {
  --max-width: 1200px;
  --hr-padding: 1rem;
  width: min(var(--max-width), 100% - (var(--hr-padding)*2));
  margin-inline: auto;
}
.second-article-content-box {
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  text-align: center;
  gap: 40px 0px;
}
.second-article-content-box h2, .second-article-content-box .article-description {
  --max-width: 480px;
  width: min(var(--max-width), 100%);
  padding: 0rem 0.5rem;
}
.michael-title {
  font-size: var(--fs-100);
  font-weight: var(--fw-400);
  color: var(--clr-primary-100);
  opacity: 0.8;
}
.second-article-image {
  width: min(100%, 600px);
  height: auto;
}
.second-article-image img {
  width: 100%;
  height: auto;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 25px, rgba(0, 0, 0, 0.05) 0px 5px 10px;
}
/* Meet the team sec */
.meet-team-sec {
  margin-top: 120px;
}
.meet-team-sec-container {
  width: 100%;
  padding: 60px 16px 100px;
  background: url("../images/team-bg-mobile.svg") no-repeat center center;
  background-size: cover;
  display: flex;
  flex-flow: column;
  align-items: center;
  gap: 60px;
}
.team-box {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  gap: 60px 120px;
}
.team-card {
  width: min(100%, 380px);
  min-height: 440px;
  background: linear-gradient(175.9deg, rgba(35, 35, 35, 0.8) 0%, rgba(34, 51, 59, 0.8) 100%);
  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
  border-radius: 16px;
  padding: 60px 1.5rem;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  text-align: center;
}
.team-card img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
}
.team-card h3 {
  font-size: var(--person-name-fs);
  font-weight: var(--person-name-fw);
}
.tyrone-nickname {
  font-size: var(--fs-200);
  font-weight: var(--fw-400);
  opacity: 0.8;
}
.person-title {
  font-size: var(--person-title-fs);
}
/* Last article sec */
.last-article-sec {
  margin-top: 120px;
}
.last-article-container {
  --max-width: 1200px;
  --hr-padding: 1rem;
  width: min(var(--max-width), 100% - (var(--hr-padding)*2));
  margin-inline: auto;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  gap: 60px;
}
.last-article-image {
  width: min(100%, 600px);
  height: auto;
}
.last-article-image img {
  width: 100%;
  height: auto;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 25px, rgba(0, 0, 0, 0.05) 0px 5px 10px;
}
.last-article-video {
  width: min(100%, 600px);
  height: auto;
}
.last-article-video iframe {
  width: 100%;
  aspect-ratio: 1 / 0.5625;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 25px, rgba(0, 0, 0, 0.05) 0px 5px 10px;
}
/* Footer */
footer {
  margin-top: 100px;
}
.footer-sec-container {
  --max-width: 1200px;
  --hr-padding: 1.5rem;
  width: min(var(--max-width), 100% - (var(--hr-padding)*2));
  margin-inline: auto;
  padding: 0px 0px 24px;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}
.footer-logo-image {
  display: block;
  width: fit-content;
}
.footer-logo-image img{
  width: 120px;
  height: auto;
}
.footer-nav-sec {
  margin-top: 2.25rem;
}
.footer-nav-sec > * + * {
  margin-top: 1.75rem;
}
.footer-nav-sec ul {
  margin-top: 1rem;
  text-align: center;
  list-style-type: none;
  list-style-position: inside;
}
.footer-nav-sec ul > * + * {
  margin-top: 0.75rem;
}
.footer-nav-sec a {
  text-decoration: none;
  color: var(--clr-primary-100);
}
.copyright {
  margin-top: 2rem;
  font-size: 0.875rem;
  color: var(--clr-primary-100);
  opacity: 0.8;
  text-align: center;
}
.copyright-sec p:last-child {
  margin-top: 10px;
  text-align: center;
}
/* Presentation dialog design */
.dialog-container,
.dialog-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.dialog-container {
  z-index: 3;
  display: flex;
  overflow-y: scroll;
}
.dialog-container[aria-hidden='true'] {
  display: none;
}
/* Hide scrollbar for Chrome, Safari and Opera */
.dialog-container::-webkit-scrollbar {
  display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.dialog-container {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
.dialog-overlay {
  background: rgba(34, 51, 59, 0.8);
  backdrop-filter: blur(2px);
}
.dialog-content {
  --max-width: 1200px;
  --hr-padding: 1rem;
  width: min(var(--max-width), 100% - (var(--hr-padding)*2));
  margin-inline: auto;
  margin: auto;
  z-index: 2; 
  padding: 60px 0px;
}
.dialog-close {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 24px;
}
.dialog-close button {
  border: none;
  background: none;
  cursor: pointer;
  transition: transform 0.2s ease-out;
}
.modal-close-btn:hover {
  transform: scale(0.95);
} 
.modal-close-btn svg rect, .modal-close-btn svg circle {
  transition: 0.2s all ease-out;
}
 .modal-close-btn:hover svg rect {
  fill: var(--clr-accent-300);
}
 .modal-close-btn:hover svg circle {
  stroke: var(--clr-accent-300);
}
 .modal-close-btn:active svg rect {
  fill: var(--clr-accent-500);
}
 .modal-close-btn:active svg circle {
  stroke: var(--clr-accent-500);
}
/* Animation */
.dialog-content[data-animate="fade-in"] {
  animation: fade-in 400ms both ease-out, zoom-in 400ms both ease-out;
}
.dialog-overlay {
  animation: fade-in 100ms both;
}
.dialog-content[data-animate="fade-out"] {
  animation: zoom-out-fade-out 200ms forwards ease-out;
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
}
@keyframes zoom-in {
  from {
    transform: scale(0.94);
  }
}
@keyframes zoom-out-fade-out {
  to {
    transform: scale(0.94);
    opacity: 0;
  }
}
.artist-content-sec {
  width: 100%;
  padding: 100px 0px;
  color: var(--clr-accent-100);
  text-align: center;
}
.artist-content-container {
  --max-width: 800px;
  --hr-padding: 1rem;
  width: min(var(--max-width), 100% - (var(--hr-padding)*2));
  margin-inline: auto;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  gap: 80px 0px;
}
.artist-intro p {
  font-size: var(--fs-200);
  margin-top: 20px;
}
.artwork-sec {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  gap: 60px;
}
.artwork-image {
  width: 100%;
  height: auto;
}
.artwork-image img {
  width: 100%;
  height: auto;
  box-shadow: rgb(50 50 93 / 25%) 0px 6px 12px -2px, rgb(0 0 0 / 30%) 0px 3px 7px -3px;
}
.artwork-description-sec h3 {
  font-size: var(--fs-300);
  font-weight: var(--fw-600);
}
.artwork-description {
  margin-top: 18px;
  font-size: var(--fs-100);
}
.artwork-description > * + * {
  margin-top: 10px;
}
.artist-socials {
  width: 100%;
}
.artist-socials ul {
  width: 100%;
  list-style-type: none;
  list-style-position: inside;
  display: flex;
  flex-flow: row wrap;
  gap: 50px;
  justify-content: center;
  align-items: center;
}
.artist-socials a {
  display: block;
  transition: all 0.2s ease-out;
}
.artist-socials a:hover {
  transform: scale(0.95);
}
.graveFx-bg {
  background: url("../images/artist-bg/graveFx.svg") var(--clr-accent-300) no-repeat top center;
  background-size: 800px auto;
}
.galentina-bg {
  background: url("../images/artist-bg/galentina.svg") var(--clr-accent-300) no-repeat top center;
  background-size: 800px auto;
}
.leggesy-bg {
  background: url("../images/artist-bg/leggesy.svg") var(--clr-accent-300) no-repeat top center;
  background-size: 800px auto;
}
.leggesy-artwork-title h3 {
  font-size: var(--fs-400);
  font-weight: var(--fw-600);
}
.gulpilil-bg {
  background: url("../images/artist-bg/gulpilil.svg") var(--clr-accent-300) no-repeat top center;
  background-size: 800px auto;
}
.champion-bg {
  background: url("../images/artist-bg/champion.svg") var(--clr-accent-300) no-repeat top center;
  background-size: 800px auto;
}
.champion-spatial-link {
  color: var(--clr-accent-500);
  text-decoration: none;
  font-weight: var(--fw-700);
  margin-top: 24px;
  display: block;
} 
@media (min-width:62.5em) {
  .article-description a {
    margin: 24px 0 0;
  }
  .article-content-box {
    padding: 0;
  }
  .hero-content-sec {
    margin: 100px 0px 160px;
  }
  .hero-content-container {
    --hr-padding: 1.5rem;
    flex-flow: row nowrap;
    justify-content: space-between;
  }
  .intro-video {
    order: 2;
  }
  .hero-description {
    order: 1;
    margin-top: 0px;
    padding: 0rem;
    gap: 24px;
    align-items: flex-start;
  }
  .hero-description-text {
    text-align: left;
  }
  .article-content-box {
    align-items: flex-start;
    text-align: left;
  }
  .main-article-container {
    --hr-padding: 1.5rem;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    gap: 80px;
  }
  .artist-sec {
    padding-top: 160px;
  }
  .slider-left-btn, .slider-right-btn {
    width: 30px;
    height: auto;
  }
  .thumbnail-gallery-sec {
    margin-top: 100px;
  }
  [data-active-image] {
    border: 4px solid var(--clr-accent-300);
   transform: scale(1.15);
  }
  .second-article-sec {
    padding-top: 160px;
  }
  .second-article-container {
    --hr-padding: 1.5rem;
  }
  .second-article-content-box {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-items: center;
    text-align: left;
    gap: 0px;
  }
  .second-article-content-box h2 {
    grid-column: 1 / 6;
    grid-row: 1 / 2;
    align-self: end;
  }
  .second-article-content-box .article-description {
    grid-column: 1 / 6;
    grid-row: 2 / 3;
    align-self: start;
  }
  .second-article-content-box h2, .second-article-content-box .article-description {
    padding: 0;
  }
  .second-article-image {
    grid-column: 7 / 13;
    grid-row: 1 / 3;
  }
  .michael-title {
    font-size: var(--fs-200);
  }
  .gulpilil-sec {
    padding-top: 160px;
  }
  .champion-sec {
    padding-top: 160px;
  }
  .meet-team-sec {
    margin-top: 160px;
  }
  .meet-team-sec-container {
    background: url("../images/team-bg.svg") no-repeat center center;
    background-size: cover;
  }
  .tyrone-nickname {
    font-size: var(--fs-400);
  }
  .last-article-sec {
    margin-top: 160px;
  }
  .last-article-container {
    --hr-padding: 1.5rem;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    gap: 80px;
  }
  .last-article-container .article-content-box {
    order: 1;
  }
  .last-article-container .last-article-image {
    order: 2;
  }
  .last-article-container .last-article-video {
    order: 2;
  }
  .footer-sec-container {
    display: grid;
    padding: 32px 24px 24px;
    grid-template-columns: repeat(12, 1fr);
    align-items: flex-start;
  }
  .footer-logo-sec {
    grid-column: 1 / 3;
  }
  .footer-nav-sec {
    margin-top: 0px;
    grid-column: 4  / 12;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
  }
  .footer-nav-sec > * + * {
    margin-top: 0px;
  }
  .copyright-sec {
    grid-column: 1 / 13;
  }
  .artist-intro p {
    font-size: var(--fs-300);
  }
  .artwork-description-sec h3 {
    font-size: var(--fs-500);
  }
  .artwork-description {
    font-size: var(--fs-200);
  }
  .graveFx-bg {
    background-size: 1400px auto;
  }
  .galentina-bg {
    background-size: 1400px auto;
  }
  .leggesy-bg {
    background-size: 1400px auto;
  }
  .leggesy-artwork-title h3 {
    font-size: var(--fs-600);
  }
  .gulpilil-bg {
    background-size: 1400px auto;
  }
  .champion-bg {
    background-size: 1400px auto;
  }
}