:root {
  --shared_width_one: 324px;
  --shared_width_two: 604px;
  --shared_width_three: 14px;
  --workshop_cell_max: 549px;
}

body {
  display: grid;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  background-color: rgb(221, 229, 255);
}

main {
  display: grid;
  width: 1520px;
  margin: 64px 0px 64px 0px;
  justify-self: center;
}

header {
  display: grid;
  width: 100%;
  grid-template-columns: var(--shared_width_one) 1fr var(--shared_width_three) 1fr var(--shared_width_two) 1fr max-content 1fr max-content 1fr max-content 1fr max-content;
  /* grid-template-areas: "A B C D E F G H I J K L M"; */
  place-self: center;
}

p {
  margin: 0;
}
h1,
h2 {
  font-family: "Zalando Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-size: 24px;
  font-variation-settings: "wdth" 100;
  line-height: 18px;
  width: max-content;
  margin: 0;
}
h2 {
  font-weight: 500;
  display: inline-block;
}

.hide {
  display: none !important;
}

.plus {
  place-self: center;
}

.workspace {
  display: grid;
  width: 100%;
  /* column-gap: var(--shared_width_three); */
  margin-top: 80px;
  row-gap: 40px;
  grid-template-columns: 390px 1fr;
}

.current_content_title {
  font-style: italic;
}

.content_sections {
  display: grid;
  grid-auto-rows: max-content;
  row-gap: 32px;
  grid-row-start: 2;
  width: max-content;
}

button {
  all: unset;
}

.content_section {
  font-family: "Zalando Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-size: 20px;
  font-variation-settings: "wdth" 100;
  font-style: italic;
  line-height: 14px;
}
.content_section:hover {
  text-decoration: underline;
  color: #0900ff;
  transform-origin: 0px;
  transition: transform 0.16s cubic-bezier(0.215, 0.61, 0.355, 1);
  transform: scale(1.025);
}
.content_section:active {
  text-decoration: underline;
  color: #0900ff;
  transform-origin: 0px;
  transition: transform 0.04s cubic-bezier(0.215, 0.61, 0.355, 1);
  transform: scale(1);
}

.current_content_grid {
  display: grid;
}

article > * {
  margin-bottom: 16px;
}
article > img {
  margin: 16px 40px 32px 0px;
}
/* article:has(.content_end) .content_body:nth-last-of-type(2) {
  margin-bottom: 32px;
} */

.content_body,
.content_body,
.content_end,
.content_title,
li {
  font-family: "Chivo Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-size: 18px;
  line-height: 140%;
}
.content_title {
  font-size: 18px;
  font-weight: 600;
  line-height: 14px;
}
.content_end {
  font-style: italic;
  line-height: 14px;
  margin-bottom: 0;
}

img {
  display: inline-block;
  /* margin: 0px 0px 32px 0px; */
}
.content_img_lecture {
  display: inline-block;
  width: 45%;
  /* margin: 8px 32px 32px 0px; */
}
.content_video_assistance {
  /* display: inline-block; */
  width: 240px;
  margin: 16px 32px 32px 0px;
}
.content_img_llms {
  display: inline-block;
  box-sizing: content-box;
  width: 75%;
  border: solid 1px #cacaca;
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 24px;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  margin-top: 0;
  /* margin: 8px 32px 32px 0px; */
}
.content_img_wgsn {
  display: inline-block;
  box-sizing: content-box;
  width: 940px;
  margin-top: 0;
  /* margin: 8px 32px 32px 0px; */
}
.content_img_workshop {
  height: 100%;
  max-height: var(--workshop_cell_max);

  /* margin: 8px 32px 32px 0px; */
}

.action_video {
  /* display: inline-block; */
  box-sizing: border-box;
  width: 100%;
}

.workshop_media_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 32px;
  /* row-gap: 32px; */
  height: var(--workshop_cell_max);
  margin-bottom: 32px;
}
.workshop_cell {
  display: grid;
  width: auto;
  height: auto;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  margin: 0;
  border: 1px solid #999999;
  border-radius: 8px;
  overflow: hidden;
}
.content_workshop_cell {
  display: inline-block;
  box-sizing: content-box;
  width: 100%;
  margin: 0;
  /* margin: 8px 32px 32px 0px; */
}

/* .workshop_media_grid > *:nth-child(5) {
  height: 480px;
  width: auto;
  object-fit: contain;
  margin-right: 32px;
} */

.content_media_grid {
  display: grid;
  grid-template-columns: auto auto auto;
  column-gap: 16px;
}

.action_grid {
  display: grid;
  grid-template-columns: 55% 1fr;
  column-gap: 32px;
  row-gap: 32px;
  border: 1px solid #020202;
  padding: 48px 48px;
  background-blend-mode: screen;
  background-color: #ffffff;
}
.action_info {
  display: grid;
  grid-template-columns: auto;
  grid-auto-rows: max-content;
  row-gap: 32px;
  width: 100%;
  /* height: max-content; */
}
.action_media {
  display: grid;
  grid-template-columns: auto;
  grid-auto-rows: max-content;
  row-gap: 32px;
}
/* .action_inline_media {
  margin-top: 16px;
  margin-bottom: 24px;
} */
.action_media_wrapper {
  display: grid;
  grid-template-areas: "CENT";
  border: 1px solid #464646;
}
.exclude {
  border: none;
  border-radius: 0;
}
.border {
  border: 1px solid #464646;
}
.topround {
  overflow: hidden;
  box-sizing: content-box;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}
.inline_margin {
  margin-top: 24px;
  margin-bottom: 32px;
}
.inline_margin_end {
  margin-top: 24px;
  margin-bottom: 0px;
}
/* .action_media_wrapper > * {
  grid-area: CENT;
} */
.action_media_caption {
  font-family: "Inconsolata", monospace;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-variation-settings: "wdth" 100;
  font-size: 16px;
  line-height: 19px;
  align-self: end;
  justify-self: center;
  color: #464646;
  background-color: #e6ecff;
  border-top: 1px solid #464646;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  padding: 12px 14px;
  box-sizing: border-box;
  height: max-content;
  width: 100%;
}

.action_point {
  display: grid;
  width: auto;
  grid-template-columns: auto;
}
.action_point > .content_title {
  font-family: "Zalando Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 550;
  font-style: normal;
  font-variation-settings: "wdth" 100;
  font-size: 20px;
  color: #161616;
  /* color: #3653b4; */
  margin-bottom: 12px;
}
.action_point > .content_body {
  color: #1f1f1f;
}
.action_point > img:first-child {
  margin-bottom: 24px;
}
.action_info_img {
  filter: drop-shadow(0 0 0 white) drop-shadow(0.5px 0 0 #464646) drop-shadow(-0.5px 0 0 #464646)
    drop-shadow(0 0.5px 0 #464646) drop-shadow(0 -0.5px 0 #464646);
  width: 100%;
}

.prototype {
  display: grid;
  grid-template-columns: 55% auto;
  column-gap: 32px;
  row-gap: 32px;
  border: 1px solid #020202;
  padding: 48px 48px;
  background-blend-mode: screen;
  background-color: #ffffff;
}
.prototype_cell {
  display: grid;
  grid-template-columns: auto;
  grid-auto-rows: max-content;
  row-gap: 12px;
  width: 100%;
  /* height: max-content; */
}
.prototype_media {
  border: 1px solid #464646;
  box-sizing: border-box;
  margin: 0;
  width: 100%;
}
.prototype_cell > .content_title {
  font-family: "Zalando Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 550;
  font-style: normal;
  font-variation-settings: "wdth" 100;
  font-size: 20px;
  color: #161616;
  /* color: #3653b4; */
}
.appendix {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 32px;
  border: 1px solid #020202;
  padding: 48px 48px;
  background-blend-mode: screen;
  row-gap: 80px;
  background-color: #ffffff;
}
.appendix_cell {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto;
  width: 100%;
  overflow: hidden;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  margin: 0;
  align-self: end;
}
.appendix_media {
  border: 1px solid #464646;
  box-sizing: border-box;
  border-bottom: none;
  width: 100%;
  align-self: end;
}
.appendix_note {
  box-sizing: border-box;
  width: 100%;
}
.esp {
  border: none;
  /* margin-bottom: 24px; */
  align-self: center;
}
.zalando-sans {
  font-family: "Zalando Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}
.inconsolata {
  font-family: "Inconsolata", monospace;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}