.section-media {
  padding: 20px 0px;
  width: 100%;
  background-color: var(--color-dark);
  color: var(--color-light);
}
.section-media-flex {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.section-media__media {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.section-media__newsletter,
.section-media__rrss,
.section-media__app {
  all: unset;
  display: flex;
  flex-direction: column;
}

.section-media__rrss,
.section-media__app {
  padding-left: 15px;
  border-left: 1px solid rgb(43, 46, 60);
}

.section-media__title {
  font-size: 22px;
  color: var(--color-title-media);
  font-weight: bold;
}

.section-media__input {
  border: 0px;
  border-bottom: 1px solid var(--color-title-media);
  background-color: transparent;
  outline-style: none;
  color: var(--color-light);
  font-size: 15px;
  font-weight: bold;
  padding-bottom: 5px;
  font-family: 'Poppins';
}

.section-media__list{
  display: flex;
  flex-direction: column;
  align-items: start;
}

.section-media__item{
  list-style: none;
}

.section-media__link:hover {
  color: var(--color-title-media);
}

.section-media__unsubscribe {
  color: gray;
}

/* responsive */
@media screen and (max-width: 780px) {
  .section-media__media {
    flex-direction: column;
    gap: 20px;
  }

  .section-media__newsletter,
  .section-media__rrss,
  .section-media__app {
    align-items: center;
  }

  .section-media__bar {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .section-media {
    text-align: center;
  }
}

@media screen and (max-width: 1008px) {
  .section-media__media {
    flex-direction: column;
    gap: 20px;
  }

  .section-media__rrss,
  .section-media__app {
    padding-left: 0px;
  }

  .section-media__newsletter,
  .section-media__rrss,
  .section-media__app {
    align-items: center;
  }

  .section-media__bar {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .section-media__rrss,
  .section-media__app {
    border-left: none;
  }

  .section-media {
    text-align: center;
  }

  .social-icon__item i {
    font-size: 20px;
  }
}