/* Bruna Pazinato · discos */

.discos{
  position: relative;
  padding: clamp(1.4rem, 4vh, 3.4rem) var(--gutter) clamp(2.4rem, 7vh, 5.5rem);
  background: var(--ink);
}

.discos__lista{
  display: grid;
  gap: clamp(1.8rem, 5vh, 3.4rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.disco{
  display: grid;
  grid-template-columns: clamp(190px, 22vw, 300px) minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1.4rem, 3vw, 2.8rem);
}

.disco__capa{
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 1;
  background: var(--charcoal);
}

.disco__capa img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.02) saturate(.88) brightness(.86);
  transform: scale(1.03);
  transition: filter .7s var(--ease-soft), transform 1.1s var(--ease);
}

.disco__capa:hover img,
.disco__capa:focus-visible img{
  filter: none;
  transform: scale(1);
}

.disco__tipo{
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(.54rem, .64vw, .66rem);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
}

.disco__nome{
  margin: .7em 0 0;
  font-family: var(--font-display);
  font-optical-sizing: none;
  font-variation-settings: var(--display-axes);
  font-size: clamp(1.3rem, 2.6vw, 2.4rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.012em;
  text-transform: uppercase;
  color: var(--paper);
}

/* as faixas */

.disco__faixas{
  margin: clamp(.9rem, 2vh, 1.3rem) 0 0;
  padding: 0;
  list-style: none;
  max-width: 46ch;
  font-family: var(--font-sans);
  font-size: clamp(.68rem, .82vw, .82rem);
  font-weight: 300;
  letter-spacing: .04em;
  line-height: 2;
  color: var(--paper-70);
}

.disco__faixas li{
  break-inside: avoid;
}

.disco__faixas i{
  font-style: normal;
  margin-right: .95em;
  color: var(--paper-26);
}

/* onde se escuta */

.disco__onde{
  display: flex;
  gap: clamp(.2rem, .8vw, .5rem);
  justify-self: end;
  margin: 0;

  margin-right: 0;
  padding: 0;
  list-style: none;
}

.disco__onde a{
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--paper-45);
  transition: color .4s linear, transform .5s var(--ease);
}

.disco__onde svg{
  width: 21px;
  height: 21px;
}

.disco__onde a:hover,
.disco__onde a:focus-visible{
  color: var(--coral);
  transform: translateY(-2px);
}

/* responsivo */

@media (max-width: 620px){

  .disco{
    grid-template-columns: 1fr;
    gap: clamp(.9rem, 2.4vh, 1.3rem);
  }

  .disco__capa{
    max-width: 260px;
  }

  .disco__onde{
    gap: 0;
    justify-self: start;
    margin: .3rem 0 0;
    margin-left: -11.5px;
  }
}