/* COLORS */
/* FONTS */
/* >= 768px */
@media screen and (min-width: 768px) {
  #product_entity-wertgutschein #content .details .icon {
    width: 50%;
  }
  #product_entity-wertgutschein #content .details .variations .form-actions {
    display: flex;
    justify-content: flex-end;
  }
  #product_entity-wertgutschein #content .details .variations .form-actions input {
    width: auto;
  }
  #product_entity-wertgutschein #content .details .variations .preview {
    bottom: 0;
    line-height: 45px;
  }
  #product_entity-wertgutschein #content .more .gutscheine {
    grid-template-columns: 1fr 1fr 1fr;
  }
  #product_entity-wertgutschein #content .more .gutscheine .gutschein a {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  #product_entity-wertgutschein #content .more .gutscheine .gutschein a .icon {
    padding: 50px 50px;
  }
  #product_entity-wertgutschein #content .more .gutscheine .gutschein a .wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }
  #product_entity-wertgutschein #content .more .gutscheine .gutschein a .wrapper .price {
    margin-top: auto;
  }
}
/* >= 1024 */
@media screen and (min-width: 1023px) {
  #product_entity-wertgutschein #content {
    padding-top: 13vw;
    border-bottom-left-radius: 1.56vw;
    border-bottom-right-radius: 1.56vw;
  }
  #product_entity-wertgutschein #content .details {
    grid-template-columns: 1fr 1fr;
    column-gap: 2.6vw;
    grid-template-areas: "icon back" "icon titel" "icon text" "icon variations";
    grid-template-rows: auto auto auto 1fr;
    margin-bottom: 5.2vw;
    padding-bottom: 5.2vw;
  }
  #product_entity-wertgutschein #content .details .icon-wrapper {
    margin-right: 2.6vw;
    position: relative;
  }
  #product_entity-wertgutschein #content .details .icon {
    width: 100%;
    padding: 6.5vw;
    margin-bottom: 0;
    border-radius: 0.625vw;
    position: absolute;
    top: 0;
    left: 0;
  }
  #product_entity-wertgutschein #content .details .icon.fixed {
    position: fixed;
    top: 13vw;
    left: 8.33vw;
    width: calc((80.74vw /2) - 2.6vw);
  }
  #product_entity-wertgutschein #content .details .icon.bottom {
    position: absolute;
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
  }
  #product_entity-wertgutschein #content .details .icon img {
    width: 14.32vw;
    height: auto;
  }
  #product_entity-wertgutschein #content .details .back {
    margin-bottom: 2.6vw;
  }
  #product_entity-wertgutschein #content .details .h1 {
    font-size: var(--font-size-h4);
    line-height: var(--line-height-h4);
  }
  #product_entity-wertgutschein #content .details .text {
    margin-bottom: 2.6vw;
  }
  #product_entity-wertgutschein #content .details .variations fieldset[data-drupal-selector="edit-group-gutschein-personalisieren"] .fieldset-legend {
    font-size: clamp(22px, 1.57vw, 30px) !important;
    line-height: var(--line-height-default);
  }
  #product_entity-wertgutschein #content .details .variations fieldset[data-drupal-selector="edit-purchased-entity-0-variation"] .fieldset-legend {
    font-size: var(--font-size-small);
    line-height: 20px;
  }
  #product_entity-wertgutschein #content .details .variations .price .small {
    font-size: 1.04vw;
    line-height: 1.04vw;
  }
  #product_entity-wertgutschein #content .more .gutscheine {
    gap: 1.95vw;
  }
  #product_entity-wertgutschein #content .more .gutscheine .gutschein a {
    border-radius: 0.625vw;
  }
  #product_entity-wertgutschein #content .more .gutscheine .gutschein a .icon {
    padding: 6.5vw;
  }
  #product_entity-wertgutschein #content .more .gutscheine .gutschein a .icon img {
    width: 14.32vw;
    height: auto;
  }
  #product_entity-wertgutschein #content .more .gutscheine .gutschein a .wrapper {
    padding: 2.08vw;
  }
  #product_entity-wertgutschein #content .more .gutscheine .gutschein a .wrapper .titel {
    margin-bottom: 1.56vw;
  }
  #product_entity-wertgutschein #content .more .gutscheine .gutschein a .wrapper .text {
    margin-bottom: 1.04vw;
  }
}
/* >= 1248 */