#alcoa {
  container-name: alcoa;
  container-type: inline-size;
  margin-block: var(--space-xl);
}

#alcoa__list {
  border: 1px solid #bfd3d6;
  display: grid;
  gap: var(--space-s-l);
  grid-template-areas: "text" "graphic";
  margin-block-start: var(--space-s);
  padding: var(--space-m);
    
  @container alcoa (width > 34em) {
    grid-template-columns: 1.61fr 1fr;
    grid-template-areas: "graphic text";
    padding: var(--space-l-xl);
  }
}

.alcoa__item {
  grid-area: text;
  opacity: 0;
  place-self: center;
  transition: all 0.2s ease;
}

.alcoa__item--active {
  opacity: 1;
}

#alcoa__graphic svg {
  margin: auto;
}

.alcoa__segment {
  cursor: pointer;
  transform-origin: center;
  transition: all .2s ease;
}

.alcoa__segment--active {
  transform: scale(1.05);
}

.alcoa__segment--active .border,
.alcoa__segment:hover .border {
  fill: #00a2c2;
  transition: fill .1s ease;
}

.border,
.cls-20 {
  transition: fill .8s ease;
}

.alcoa__segment:hover .border,
.alcoa__segment:hover .cls-20 {
  transition-duration: .1s;
}

.alcoa__segment:hover .cls-20 {
  fill: #ebf8fa;
}

.cls-1,
.cls-11,
.cls-13,
.cls-7,
.cls-9 {
  fill: none;
}
.cls-1,
.cls-7 {
  stroke-linejoin: round;
}
.cls-1,
.cls-13,
.cls-7 {
  stroke-linecap: round;
}
.cls-1,
.cls-9 {
  stroke: #00a2c2;
}
.cls-1,
.cls-13 {
  stroke-width: 3.75px;
}
.cls-11,
.cls-7,
.cls-9 {
  stroke-width: 3.8px;
}
.cls-11,
.cls-13,
.cls-7 {
  stroke: #005461;
}
.cls-17,
.cls-19,
.border {
  fill: #005461;
}
.cls-18 {
  fill: #00a2c2;
}
.cls-19 {
  fill-rule: evenodd;
}
.cls-20 {
  fill: #efefef;
}