@use "../../../../styles/int.scss";

.container {
  display: grid;
  align-items: center;
  gap: int.$spacing-2;
  margin-top: int.$spacing-4;
  padding-bottom: int.$spacing-2;
  grid-template-columns: 80px 1fr 80px;
  grid-template-rows: auto auto;
  grid-template-areas: "demHeadshot space gopHeadshot"
    "bar bar bar";
  row-gap: 0;

  @include int.container-at-least("md") {
    grid-template-columns: 80px 1fr 80px;
    grid-template-rows: auto;
    grid-template-areas: "demHeadshot bar gopHeadshot";
  }
}

.barContainer {
  position: relative;
  grid-area: bar;
}

.bar {
  display: grid;
  transition: grid-template-rows ease-in-out .2s,
    opacity ease-in-out .2s;
  grid-template-rows: 1fr;
  opacity: 1;
}

.gopHeadshot,
.demHeadshot {
  justify-self: center;
}

.gopHeadshot {
  grid-area: gopHeadshot;
}

.demHeadshot {
  grid-area: demHeadshot;
}

.headshot {
  max-width: int.$spacing-16;

  @include int.container-at-least("md") {
    max-width: int.$spacing-20;
  }
}