/************************************************************************************/
/* 6KA Softwareentwicklung und Digitalisierung                                      */
/* https://6ka-digital.com                                                          */
/*                                                                                  */
/* main-service-block.css v1.0.1 - 04.06.2026                                       */
/************************************************************************************/

@layer layout {
    
    .landing-services                               {   width: 100%;
                                                        max-width: 1440px;
                                                        margin: 0rem auto 0rem auto;
                                                        padding: 0 1.5rem;
                                                        display: grid;
                                                        grid-template-columns: repeat(4, minmax(0, 1fr));
                                                        background: var(--primary-grey7); } 

    .landing-service-card                           {   display: flex;
                                                        flex-direction: column;
                                                        align-items: stretch;
                                                        gap: 1.25rem;
                                                        padding: 2rem 2.5rem 2rem 2.5rem;
                                                        margin: 5rem 1rem 5rem 1rem;
                                                        background: var(--primary-white);
                                                        border: 1px solid var(--primary-grey8);
                                                        min-width: 0;
                                                        position: relative; }

    .landing-service-card__head                     {   display: flex;
                                                        align-items: center;
                                                        gap: 1rem;
                                                        margin: 0;
                                                        padding: 0;
                                                        text-align: left; }

    .landing-service-card__icon                     {   display: block;
                                                        width: 3rem;
                                                        height: auto;

                                                        flex: 0 0 auto; }

    .landing-service-card__head h3                  {   margin: 0;
                                                        padding: 0;
                                                        font-size: 1.3rem;
                                                        color: var(--primary-blue3); }  

    @media (max-width: 1199.98px)                   {                                                        

        .landing-service-card                       {   margin: 2rem 1rem 3rem 1rem; }
    }

    @media (max-width: 1024px)                      {

        .landing-services                           {   margin: 1rem auto 0rem auto; }
    }    
}

@layer components { 

    .landing-service-card__link                     {   margin-top: auto;
                                                        color: var(--primary-green);
                                                        font-weight: 700;
                                                        text-decoration: none; }

    .landing-service-card__link:hover,
    .landing-service-card__link:focus-visible       {   color: var(--primary-blue3);
                                                        text-decoration: underline; }                                                        

    @media (max-width: 1199.98px)                   {                                                        

        .landing-services                           {   grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    @media (max-width: 639.98px)                    {

        .landing-services                           {   grid-template-columns: 1fr; }

        
    }
}