@media (max-width: 380px) {
    h1, h2 {
        font-size: 34px;
    }
}
@media (min-width: 500px) {

    .swiper-slide img {
        width: 100%;
        margin: auto !important;
        display: block;
        aspect-ratio: 2400 / 830;
    }

    div.grid.mini-shop .item {
        margin-bottom: 0;
        width: calc(25% - 10px);
        margin-left: 10px;
    }

    div.grid.shop .item {
        width: calc(33.33% - 20px);
        margin-left: 20px;
    }

    footer div.grid .item {
        width: calc( 50% - 15px);
    }

    div.grid.team_new .item {
        width: calc(33% - 15px);
        margin-left: 15px;
    }

    div.grid.team_new .item h3 {
        margin-bottom: 0;
        font-size: initial;
    }
    .story_gallery a {
        width: calc(33.33% - 30px);
    }
}

@media (min-width: 768px) {

    .body-context.body {
        padding-top: 0px;
    }

    h1, h2 {
        font-size: 28px;
    }

    /*******************************************/
    /* Inhalts-Bilder
    /*******************************************/

    .fr-dii.fr-fil {
        float: left;
        margin: 0 20px 0 0;
    }

    .fr-dii.fr-fir {
        float: right;
        margin: 0 0 0 20px;
    }

    .half {
        width: 50%;
    }

    .half:nth-of-type(even) {
        padding-left: 15px;
    }

    .half:nth-of-type(odd) {
        padding-right: 15px;
    }

    form#supportformular .item.half:nth-of-type(even) {
        padding-left: 0;
    }

    form#supportformular .item.half:nth-of-type(odd) {
        padding-right: 0;
    }

    .fourth {
        width: 25%;
    }
    .story_gallery a {
        width: calc(25% - 30px);
    }

    div.grid.news .item {
        width: calc(50% - 15px);
    }

    div.grid.news .item:nth-of-type(odd) {
        margin-right: 15px;
    }
    div.grid.news .item:nth-of-type(even) {
        margin-left: 15px;
    }

    div.grid.day {
        flex-direction: row;
    }


    div.grid.day .item h4 {
        display: none;
    }

    div.grid.day .item {
        width: 36%;
    }
    div.grid.day .item:first-of-type {
        width: 20%;
    }


    div.grid.team,
    div.grid.glass_pattern {
        width: 100%;
        margin-left: -15px;
    }

    div.grid.team .item,
    div.grid.glass_pattern .item {
        width: 15%;
        margin-left: 15px;
    }

    div.grid.shop .item {
        width: calc( 25% - 20px);
        margin-left: 20px;
    }

    div.grid.shop .item:nth-of-type(2n+0) {
        margin-right: 0;
    }

    div.grid.team_new .item {
        width: calc(25% - 15px);
        margin-left: 15px;
    }

    div.grid.team_new .item h3 {
        margin-bottom: 0;
        font-size: initial;
    }

    div.grid.mini-shop-top {
        display: flex;
    }

    section.mobile-category-nav {
        display: none;
    }

    div.grid.mini-shop .item {
        width: calc(12.5% - 10px);
    }
    div.gallery {
        width: calc( 38% - 15px);
        margin-right: 30px;
    }

    .content.product {
        padding-top: 2em;
    }

    .product .body {
        float: right;
        width: calc( 62% - 15px);
    }

    .product .body h1 {
        margin-top: 0;
    }

    form.add_to_cart {
        width: 50%;
    }

    p.sold-out {
        width: 50%;
    }

    input[type="text"],
    input[type="number"],
    input[type="tel"],
    input[type="email"],
    input[type="password"],
    input[type="url"],
    textarea, select {
        width: 90%;
    }

    form#supportformular .support_purpose {
        flex-direction: row;
    }
    form#supportformular .support_purpose div.text {
        display: inline-block;
        margin-left: 30px;
        width: calc(100% - 130px);
        text-align: left;
    }
    form#supportformular .grid {
        width: calc(100% + 15px);
        margin-left: -15px;
    }
    form#supportformular .support_purpose h3 {
        margin-bottom: 0.1em;
    }

    form#supportformular .support_purpose img {
        display: inline-block;
        width: 30%;
        margin-left: 0;
        margin-bottom: 20px;
    }
    article .story_body.text {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
    }
    article .story_body .text-body {
       width: 100%;
        text-align: center;
    }

    article .story_body.left .text-body {
        width: calc(50% - 15px);
        text-align: left;
        margin-left: auto;
    }
    article .story_body.right .text-body {
        width: calc(50% - 15px);
        text-align: right;
        margin-right: auto;
    }
    article .story_body.left .text-image {
        width: calc(50% - 15px);
        display: block;
        margin: 0 auto 30px 0;
    }
    article .story_body.right .text-image {
        width: calc(50% - 15px);
        display: block;
        margin: 0 0 30px auto;
    }
}