:root {
  color-scheme: light;
  --paper: #d5d9e1;
  --ink: #171719;
  --orange: #ff674c;
  --pink: #d45e99;
  --purple: #7967bd;
  --page-width: 1232px;
  font-family: Arial, Helvetica, sans-serif;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--paper);
  scrollbar-width: none;
}

html::-webkit-scrollbar {
  display: none;
}

body {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 10;
  padding: 9px 13px;
  background: #fff;
  color: #111;
  transform: translateY(-180%);
}

.skip-link:focus {
  transform: translateY(0);
}

.speaker-page {
  width: min(calc(100% - 96px), var(--page-width));
  min-height: 100vh;
  margin-inline: auto;
  padding: 112px 0 150px;
}

.speaker-page__header h1 {
  margin: 0;
  background: linear-gradient(90deg, var(--orange) 0%, var(--pink) 51%, var(--purple) 100%);
  background-clip: text;
  color: transparent;
  font-size: 48px;
  font-weight: 400;
  line-height: 1.06;
  text-transform: uppercase;
}

.speaker-page__header p {
  margin: 17px 0 0;
  color: #25262a;
  font-size: 16px;
  line-height: 1.35;
}

.speaker-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 68px 28px;
  margin-top: 58px;
}

.speaker-card {
  min-width: 0;
  min-height: 276px;
  text-align: center;
}

.speaker-card img {
  width: 136px;
  height: 136px;
  margin-inline: auto;
  border-radius: 50%;
  object-fit: contain;
}

.speaker-card h2 {
  margin: 18px 0 0;
  color: #171719;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.22;
  text-transform: uppercase;
}

.speaker-card p {
  max-width: 178px;
  margin: 5px auto 0;
  color: #222328;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.28;
}

@media (max-width: 1050px) {
  .speaker-page {
    width: min(calc(100% - 64px), var(--page-width));
    padding-top: 88px;
  }

  .speaker-page__header h1 {
    font-size: 40px;
  }

  .speaker-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .speaker-page {
    width: min(calc(100% - 32px), var(--page-width));
    padding: 56px 0 88px;
  }

  .speaker-page__header h1 {
    font-size: 32px;
    line-height: 1.12;
  }

  .speaker-page__header p {
    margin-top: 12px;
    font-size: 14px;
  }

  .speaker-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 44px 16px;
    margin-top: 44px;
  }

  .speaker-card {
    min-height: 248px;
  }

  .speaker-card img {
    width: 118px;
    height: 118px;
  }

  .speaker-card h2 {
    margin-top: 15px;
  }
}