@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@600&display=swap');

/* ---- Laureates List ---- */
div#main ol.ceremony-laureates-list {
  --card-padding-top: 6.5cqw;
  --card-padding-sides: 5.4cqw;
  --card-padding-bottom: 5.4cqw;
  --two-laureate-details-gap: 10cqw;
  --three-laureate-details-gap: 3cqw;
  --tight-line-height: 100%;
  --label-letter-spacing: 6%;
}

div#main ol.ceremony-laureates-list * {
  padding: 0;
  margin: 0;
}

div#main ol.ceremony-laureates-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: max(18px, min(5vw, 30px)) min(3vw, 25px);
  margin: 0;
  padding: 0;
  list-style: none;
}

div#main ol.ceremony-laureates-list li {
  position: relative;
  max-width: 460px;
  justify-self: center;
  width: 100%;
  container-type: inline-size;
}

div#main ol.ceremony-laureates-list li > a {
  display: block;
  position: relative;
}

div#main ol.ceremony-laureates-list li p.laureate-order {
  font-size: 5.3cqw;
  font-weight: 700;
  line-height: var(--tight-line-height);
  margin-bottom: 2cqw;
}

div#main ol.ceremony-laureates-list li img {
  display: block;
  width: 100%;
}

div#main ol.ceremony-laureates-list li .laureate-card {
  height: 48.2%;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  padding: var(--card-padding-top) var(--card-padding-sides) var(--card-padding-bottom);
  box-sizing: border-box;
}

div#main ol.ceremony-laureates-list li .laureate-card p {
  color: white;
}

div#main ol.ceremony-laureates-list li .laureate-card .prize-name {
  text-transform: uppercase;
  letter-spacing: 0%;
  line-height: var(--tight-line-height);
  font-size: 3.9cqw;
}

div#main ol.ceremony-laureates-list li .laureate-card .laureates-details-container {
  display: flex;
}

/* If there is at least two laureates */
div#main ol.ceremony-laureates-list li .laureate-card .laureates-details-container:has(.laureate-details:nth-child(2)) {
  gap: var(--two-laureate-details-gap);
}

/* If there is at least three laureates */
div#main ol.ceremony-laureates-list li .laureate-card .laureates-details-container:has(.laureate-details:nth-child(3)) {
  gap: var(--three-laureate-details-gap);
}

div#main ol.ceremony-laureates-list li .laureate-card :is(div.common-institution-container, .laureates-details-container .laureate-details) {
  display: flex;
  flex-direction: column;
  gap: 2cqw;
}

div#main ol.ceremony-laureates-list li .laureate-card .laureates-details-container .laureate-details .laureate-name {
  text-transform: uppercase;
  font-family: "Urbanist", sans-serif;
  font-size: 6cqw;
  line-height: 104%;
  letter-spacing: -3%;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}

div#main ol.ceremony-laureates-list li .laureate-card .laureates-details-container .laureate-details .laureate-name.big-font {
  font-size: 8.8cqw;
}

/* If there is at least two laureates */
div#main ol.ceremony-laureates-list li .laureate-card .laureates-details-container:has(.laureate-details:nth-child(2)) .laureate-details {
  width: calc((100cqw - var(--two-laureate-details-gap) - var(--card-padding-sides) * 2) / 2);
}

/* If there is at least three laureates */
div#main ol.ceremony-laureates-list li .laureate-card .laureates-details-container:has(.laureate-details:nth-child(3)) .laureate-details {
  width: calc((100cqw - var(--three-laureate-details-gap) - var(--card-padding-sides) * 2) / 3);
}

div#main ol.ceremony-laureates-list li .laureate-card .laureate-institution {
  font-size: 2.7cqw;
  line-height: var(--tight-line-height);
  letter-spacing: var(--label-letter-spacing);
  font-weight: 500;
}

div#main ol.ceremony-laureates-list li .laureate-card .card-bottom {
  display: flex;
  gap: 0;
  justify-content: space-between;
}

div#main ol.ceremony-laureates-list li .laureate-card .card-bottom .science-text {
  font-size: 3.34cqw;
  line-height: var(--tight-line-height);
  letter-spacing: var(--label-letter-spacing);
  width: 90%;
}

div#main ol.ceremony-laureates-list li .laureate-card .card-bottom .arrow-right {
  bottom: 0;
  right: 0;
  height: 6.9cqw;
  margin: auto 0 0.3cqw;
  transition: transform 300ms;
}

div#main ol.ceremony-laureates-list li:hover .laureate-card .card-bottom .arrow-right {
  transform: translateX(2.2cqw);
}

/* ---- Laureate View Page ---- */

div#main div.ceremony-laureate-view * {
  margin: 0;
  padding: 0;
}

div#main div.ceremony-laureate-view {
  display: flex;
  flex-direction: column;
  gap: 25px;
  margin-top: 20px;
}

div#main div.ceremony-laureate-view h2 {
  text-transform: uppercase;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 3%;
}

div#main div.ceremony-laureate-view hr {
  color: #000;
  border-style: solid;
  width: 130px;
}

div#main div.ceremony-laureate-view video {
  display: block;
  width: 100%;
}

div#main div.ceremony-laureate-view .view-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

div#main div.ceremony-laureate-view .view-name {
  font-size: 24px;
}

div#main div.ceremony-laureate-view .description {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

div#main div.ceremony-laureate-view .view-science-text {
  font-size: 18px;
  font-style: italic;
  line-height: 130%;
}

div#main div.ceremony-laureate-view .highlighted-laureates {
  display: flex;
  gap: 80px;
}

div#main div.ceremony-laureate-view .highlighted-laureates li {
  display: flex;
  align-items: center;
  gap: 15px;
}

div#main div.ceremony-laureate-view .highlighted-laureates a.link-image-cover {
  display: block;
}

div#main div.ceremony-laureate-view .highlighted-laureates img {
  width: 60px;
}

@media screen and (max-width: 767px) {
  div#main div.ceremony-laureate-view video {
    width: 100vw;
    margin-left: -20px;
  }
}

@media screen and (max-width: 479px) {
  div#main div.ceremony-laureate-view video {
    margin-left: -10px;
  }
}