.component__clinic{
  display:grid;
  gap:10px;
  grid-template-columns:1fr;
  width:100%;
}
@media screen and (min-width:992px){
  .component__clinic{
    gap:24px;
    grid-template-columns:1fr 2fr;
  }
}

.clinic-card{
  border:1px solid #e0eaf7;
  border-radius:.625rem;
  overflow:hidden;
}
.clinic-card__info{
  display:flex;
  flex-direction:column;
  height:100%;
  justify-content:space-between;
  padding:20px;
}
@media screen and (min-width:1200px){
  .clinic-card__info{
    padding:24px;
  }
}
.clinic-card__header{
  align-items:flex-start;
  display:flex;
  gap:10px;
  margin-bottom:16px;
}
@media screen and (min-width:1200px){
  .clinic-card__header{
    margin-bottom:18px;
  }
}

.clinic-card__icon{
  flex-shrink:0;
  height:24px;
  width:24px;
}

.clinic-card__title{
  font-family:var(--font-medium);
  font-size:16px;
}
@media screen and (min-width:1200px){
  .clinic-card__title{
    font-size:18px;
  }
}
.clinic-card__section:not(:last-child){
  margin-bottom:14px;
}

.clinic-card__label{
  color:#515458;
  font-size:14px;
  margin-bottom:8px;
}

.clinic-card__value{
  color:#252525;
  font-size:14px;
}
@media screen and (min-width:1200px){
  .clinic-card__value{
    font-size:16px;
  }
}
.clinic-card__phone{
  color:#252525;
  text-decoration:none;
  transition:color .2s ease;
}

.clinic-card__phone:hover{
  color:#15a8f1;
}
.clinic-card__metro{
  align-items:center;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.clinic-card__metro-icon{
  border-radius:50%;
  display:inline-block;
  flex-shrink:0;
  height:6px;
  width:6px;
}

.clinic-card__metro-name{
  color:#252525;
  font-size:14px;
}
@media screen and (min-width:1200px){
  .clinic-card__metro-name{
    font-size:16px;
  }
}

.clinic-card__metro-distance{
  align-items:center;
  color:#515458;
  display:flex;
  font-size:13px;
}

.clinic-card__bottom{
  align-items:center;
  display:flex;
  flex-direction:column;
  gap:8px;
  justify-content:space-between;
  margin-top:24px;
}
@media screen and (min-width:1200px){
  .clinic-card__bottom{
    margin-top:30px;
  }
}
.clinic-card__transport{
  display:flex;
  gap:8px;
  width:100%;
}

.clinic-card__transport-btn{
  align-items:flex-start;
  background:#f4f8fd;
  border:none;
  border-radius:.625rem;
  color:#515458;
  cursor:pointer;
  display:flex;
  flex:1;
  flex-direction:column;
  font-size:14px;
  gap:8px;
  justify-content:center;
  padding:14px 16px;
  transition:all .2s ease;
}
@media screen and (min-width:425px){
  .clinic-card__transport-btn{
    align-items:center;
    flex-direction:row;
  }
}
@media screen and (min-width:1200px){
  .clinic-card__transport-btn{
    border-radius:2.5rem;
    font-size:16px;
    gap:12px;
  }
}

.clinic-card__transport-btn:hover{
  background:rgba(21,168,241,.102);
}

.transport-icon{
  font-size:18px;
}

.clinic-card__actions,.clinic-card__actions .component-button__item{
  width:100%;
}
.clinic-card__image-block{
  min-height:150px;
  position:relative;
  width:100%;
}
@media screen and (min-width:1200px){
  .clinic-card__image-block{
    min-height:460px;
  }
}

.clinic-card__image{
  background-position:50%;
  background-repeat:no-repeat;
  background-size:cover;
  border-radius:.625rem;
  height:100%;
  width:100%;
}

.clinic-card__image--placeholder{
  align-items:center;
  background:linear-gradient(135deg, #e0eaf7, #15a8f1);
  border-radius:.625rem;
  display:flex;
  justify-content:center;
}

.clinic-card__image--placeholder:after{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7m0 9.5a2.5 2.5 0 0 1 0-5 2.5 2.5 0 0 1 0 5'/%3E%3C/svg%3E");
  background-size:contain;
  content:"";
  height:80px;
  opacity:.5;
  width:80px;
}
.clinic{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .5s ease,transform .5s ease,box-shadow .3s ease;
}

.clinic.is-visible{
  opacity:1;
  transform:translateY(0);
}