.component-abonnements{
  margin-bottom:3rem;
}

.abonnements__header{
  font-size:.875rem;
  grid-area:abonnements__header;
}
@media screen and (min-width:768px){
  .abonnements__header{
    font-size:1rem;
  }
}
@media screen and (min-width:1200px){
  .abonnements__header{
    font-size:1.125rem;
  }
}

.abonnements__cost{
  font-size:1rem;
  grid-area:abonnements__cost;
}
@media screen and (min-width:768px){
  .abonnements__cost{
    text-align:right;
  }
}
@media screen and (min-width:1200px){
  .abonnements__cost{
    font-size:1.125rem;
  }
}

.abonnements__action{
  grid-area:abonnements__action;
}

.abonnements__action .component-button__item{
  padding:11px 30px;
}

.abonnements__sections{
  display:grid;
  grid-column-gap:1rem;
  gap:1rem;
  grid-template-columns:1fr;
  margin-top:1.5rem;
}

.abonnements__image{
  width:100%;
}

.abonnements__backlink{
  color:#15a8f1;
  display:none;
  font-size:1.2rem;
  margin:1rem 0;
  text-align:center;
}
.abonnements__backlink:hover{
  color:#0497e0;
}

.abonnements__item{
  align-items:center;
  background:#f4f8fd;
  border:1px solid #e0eaf7;
  border-radius:.625rem;
  -moz-border-radius:.625rem;
  -webkit-border-radius:.625rem;
  -moz-column-gap:1rem;
       column-gap:1rem;
  display:grid;
  font-family:var(--font-normal);
  grid-template-areas:"abonnements__header abonnements__header" "abonnements__cost abonnements__action";
  grid-template-columns:auto 1fr;
  margin-bottom:.5rem;
  padding:1rem 1.25rem;
  row-gap:1rem;
}
@media screen and (min-width:1200px){
  .abonnements__item{
    padding:1rem 1.5rem;
  }
}

.abonnements__item-structure{
  margin-bottom:2rem;
}

.abonnements__btn{
  background-color:#15a8f1;
  border:0;
  border-radius:4px;
  -moz-border-radius:4px;
  -webkit-border-radius:4px;
  color:#fff;
  cursor:pointer;
  font-size:16px;
  max-width:200px;
  padding:1rem;
  text-transform:uppercase;
  transition:all .3s ease-out;
  width:100%;
}
.abonnements__btn:hover{
  background-color:#0497e0;
  color:#fff;
}

.abonnements__section{
  border:1px solid #e0eaf7;
  color:#fff;
  cursor:pointer;
}
.abonnements__section:hover{
  border:1px solid #e0eaf7;
  border-radius:.625rem;
}

.abonnements__section.active:hover{
  border:1px solid #e0eaf7;
}
.abonnements__section.active .abonnements__image{
  border:1px solid #e0eaf7;
  border-radius:.625rem;
}

@media screen and (min-width:768px){
  .abonnements__item{
    grid-template-areas:"abonnements__header abonnements__cost abonnements__action";
    grid-template-columns:3fr 1fr auto;
  }
  .abonnements__sections{
    display:grid;
    grid-column-gap:1rem;
    grid-template-columns:1fr 1fr 1fr;
    margin-top:0;
  }
}