/* =====================================================================
   ICON WRAPPER
   ===================================================================== */

.srif-icon-wrapper {
    box-sizing: border-box;
    width: 200px;
    aspect-ratio: 1;
    margin: auto;
    border-radius: 50%;
    background-color: var(--color-turquoise);
    display: flex;
    align-items: center;
    justify-content: center;
}

.srif-icon-wrapper__image {
    display: block;
    flex-shrink: 0;
    width: 50%;
    aspect-ratio: 1;
    object-fit: contain;
}




/* =====================================================================
   RESPONSIVE
   ===================================================================== */

@media screen and (max-width: 1200px) { .srif-icon-wrapper { --size: 180px; } }
@media screen and (max-width: 992px)  { .srif-icon-wrapper { --size: 160px; } }
@media screen and (max-width: 768px)  {
    .srif-icon-wrapper { --size: 140px; margin-top: 30px; }
}
@media screen and (max-width: 576px)  { .srif-icon-wrapper { --size: 120px; } }