.blockandsidecolumn {
  display: grid;
  grid-template-columns: 250px 1fr;
  justify-content: flex-start;
  align-items: flex-start;
  margin: 40px 0;
}

.blockandsidecolumn:first-child {
  margin-top: 0;
}

.blockandsidecolumn:last-child {
  margin-bottom: 0;
}

.blockandsidecolumn_column_larger {
  grid-template-columns: 300px 1fr;
}

.blockandsidecolumn__block {
  margin: 0 30px;
}

.blockandsidecolumn__column {
}

.blockandsidecolumn__row {
  grid-column: 1/3;
}

.blockandsidecolumn__image {
  max-width: 100%;
  max-height: 100%;
}

.blockandsidecolumn__headline {
  font-size: 1.375em;
  font-weight: 700;
  margin: 1em 0;
}

.blockandsidecolumn__headline:first-child {
  margin-top: 0;
}

.blockandsidecolumn__headline:last-child {
  margin-bottom: 0;
}

.blockandsidecolumn__headline_size_larger {
  font-size: 2.25em;
  margin: 1.2em 0;
}

.blockandsidecolumn__subheadline {
  font-size: 1.25em;
  font-weight: 700;
  margin: 0.75em 0;
}

.blockandsidecolumn__subheadline:first-child {
  margin-top: 0;
}

.blockandsidecolumn__subheadline:last-child {
  margin-bottom: 0;
}

.blockandsidecolumn__text {
  margin: 0.25em 0;
}

.blockandsidecolumn__text_spacing_larger {
  margin: 1em 0;  
}

.blockandsidecolumn__text_size_smaller {
  font-size: 0.875em;
}

.blockandsidecolumn__iconbeforetext {
  max-height: 1.25em;
  max-width: 1.25em;
  margin: 0 0.75em;
  vertical-align: middle;
}

.blockandsidecolumn__iconbeforetext_size_smaller {
  max-height: 1em;
  max-width: 1em;
}

.blockandsidecolumn__list {
  margin: 0;
  list-style-type: none;
}

.blockandsidecolumn__listitem {
  margin: 0.3em 0;
  position: relative;
}

.blockandsidecolumn__listitem:before {
  content: "◼";
  color: blue;
  position: absolute;
  top: 0;
  left: -30px;
}

.blockandsidecolumn__listitem_spacing_larger {
  margin: 1em 0;
}

@media screen and (max-width: 1100px) {
  .blockandsidecolumn {
    grid-template-columns: 200px 1fr;
  }
}

@media screen and (max-width: 580px) {
  .blockandsidecolumn {
    grid-template-columns: 1fr;
  }
  
  .blockandsidecolumn__block {
    margin: 30px 0;
  }

  .blockandsidecolumn__column {
    width: min(300px, 100%);
  }

  .blockandsidecolumn__row {
    grid-column: auto;
  }
}

@media screen and (max-width: 350px) {
  .blockandsidecolumn__headline,
  .blockandsidecolumn__subheadline,
  .blockandsidecolumn__text,
  .blockandsidecolumn__listitem {
    word-break: break-word;
  }
  
}