.banner-list {
  display: flex;
  flex-flow: column;
  gap: 1rem;
}

.banner__remove {
  grid-area: image;
  opacity: 0;
  color: var(--white);
  background: var(--negative-color-alpha-50);
  backdrop-filter: blur(0.5rem);
  cursor: pointer;
  border: none;
  outline: none;
  box-shadow: none;
  transition: opacity 0.3s;

  svg {
    fill: none;
  }

  &:hover {
    opacity: 1;
  }
}

.banner-list__item {
  display: grid;
  grid-template:
    [button] 'button' auto
    [image] 'image' auto
    [link] 'link' auto
    / [details] 60rem;
  gap: 1rem;
  justify-content: center;
}

.banner__image {
  grid-area: image;
  object-fit: scale-down;
  width: 60rem;

  &:hover {
    + .banner__remove {
      opacity: 1;
    }
  }
}

.banner__link {
  grid-area: link;
  font-size: 1.25rem;
}

.banner-image {
  object-fit: scale-down;
  height: 10rem;
  width: auto;
  grid-column: 2/3;
}

.cosmo-button.is--add-banner {
  grid-area: button;
}