/* ==========================================
   RADIO MEGA-SUNSHINE
   LAYOUT
========================================== */

/* Hauptbreite */

:root{

    --site-width:1550px;

}

/* ==========================================
   Seitenlayout
========================================== */

.site-layout{

    max-width:var(--site-width);

    margin:30px auto;

    padding:0 20px;

    display:grid;

    grid-template-columns:340px 1fr 340px;

    gap:25px;

    align-items:start;

}

/* Allgemeine Container */

.site-container,
.header-top,
.hero,
.hero-content,
.footer-container{

    max-width:var(--site-width);

    margin:0 auto;

    width:100%;

}

/* Sidebars */

.sidebar{

    display:flex;

    flex-direction:column;

    gap:20px;

}

/* Hauptbereich */

.content{

    display:flex;

    flex-direction:column;

    gap:20px;

}

/* Boxen */

.box{

    background:#fffef8;

    border:1px solid #ddd8b3;

    border-radius:18px;

    padding:20px;

    box-shadow:0 8px 18px rgba(0,0,0,.08);

    transition:.25s;

}

.box:hover{

    transform:translateY(-3px);

    box-shadow:0 15px 30px rgba(0,0,0,.12);

}

/* Überschriften */

.box h2,
.box h3{

    color:#4e9d29;

    margin-bottom:15px;

    font-weight:700;

}

/* Bilder */

.box img{

    border-radius:12px;

}

/* ==========================================
   Tablet
========================================== */

@media (max-width:1400px){

    .site-layout{

        grid-template-columns:300px 1fr 300px;

    }

}

/* ==========================================
   Handy
========================================== */

@media (max-width:1100px){

    .site-layout{

        grid-template-columns:1fr;

    }

    .sidebar{

        order:2;

    }

    .content{

        order:1;

    }

}