/* SECTION: CONTAINER */

.container {
  width: min(100% - 2rem, var(--container-max));
  margin-inline: auto; 
}

/* SECTION: SECTIONS */

.section {
  padding-block: clamp(3rem, 10vw, var(--space-5));
}

.section--tint {
  background-color: var(--color-tint);
}

/* SECTION: HEADER */

.site-header {
  position: sticky;      
  top: 0;
  z-index: 50;           
}

.site-header__inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;       
  gap: var(--space-2);
  min-height: var(--header-height);
  padding-block: var(--space-1);
}

.site-header__brand {
  margin-right: auto;
}

/* SECTION: HERO */

.hero {
  position: relative;    
  overflow: hidden;      
  display: flex;
  align-items: center;   
  min-height: clamp(28rem, 80vh, 48rem);
  padding-block: var(--space-4);
}

.hero__image {
  position: absolute;
  inset: 0;             
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero .container {
  position: relative;   
  z-index: 2;
  max-width: 56rem;     
}

/* SECTION: ABOUT */

.about__grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr; 
}

@media (min-width: 768px) {
  .about__grid {
    grid-template-columns: 3fr 2fr; 
    align-items: start;             
  }
}

/* SECTION: ABSTRACTS */

.abstracts__banner {
  margin: 0;
}

.abstracts__banner img {
  width: 100%;
  max-height: 22rem;      
  object-fit: cover;
}

.abstracts .container {
  padding-top: var(--space-4);
}

/* SECTION: REGISTRATION */

.registration__grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .registration__grid {
    grid-template-columns: 3fr 2fr;
    align-items: start;
  }
}

/* SECTION: PROGRAMME */

.programme .table-wrap {
  max-width: 40rem;
}

/* SECTION: ORGANISERS */

.organiser-grid {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

/* SECTION: FOOTER */

.site-footer__grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .site-footer__grid {
    grid-template-columns: 2fr 1fr 2fr;
  }
}

/* SECTION: DESKTOP REFINEMENTS */

@media (min-width: 1024px) {

  .hero .container {
    max-width: 60rem;
  }
}